Sébastien Lorber

This Week In React #94: 2 years 🥳️, memoization, composition, Remix, Next.js, Gatsby, React-Native, Windows, CSS, TypeScript...

This Week In React #94: 2 years 🥳️, memoization, composition, Remix, Next.js, Gatsby, React-Native, Windows, CSS, TypeScript...

Sébastien Lorber's photo
Sébastien Lorber
·

7 min read

Hi everyone!

The English version of this newsletter only started recently, but still... 🥳️ this week I'm celebrating the 2nd anniversary of this newsletter 🥂, considering the very first French edition was sent 2 years ago.

I'm preparing a Remix website. That would be awesome if you could write me a public testimonial on Twitter or LinkedIn. I will need some for the upcoming landing page, to convince potential subscribers with social proof 😏.

I already have some great feedback (thanks 🙏), but those are mostly replies, reshares, comments. I'd like to collect a few public testimonials (ability to link to them) where you explain why you like this newsletter, and where the text can be well-understood in isolation: this is best fit for a landing page.

In case you want to know more about the story behind this newsletter, I created an Indie Hacker page where I build in public. I plan to update it every month.

🙏 Support the newsletter:

React

Using global memoization in React

Vladimir explains that sometimes useMemo is not enough, and we need to share cached data between multiple components. He suggests 5 ways to cache data in a global way outside React components, from a single constant to a LRU cache.

My opinion: using WeakMap could also be a nice solution, and why not provide the cache inside a React context.

React component as prop: the right way™️

Nadia gives good reasons to use React composition. She uses a button with text + icon as an example, suggest 3 alternatives and compare them under different update scenarios:

  • icon={<MyIcon/>}
  • Icon={MyIcon}
  • renderIcon={(...settings) <Icon {...settings}/>}

I don't like much the 1st one, and try to avoid cloneElement whenever I can.

Extras:

💸 Sponsors

React Bricks: CMS with visual editing for Next.js, Gatsby and Remix, based on React components

Content creators don't like the grey forms of a headless CMS.

Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?

React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.

You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.

Learn it in about 2 hours with the Step-by-step tutorial or the full Documentation.

Create your free account and start building now!

React-Native

Measuring and improving performance on a React Native app

Alexandre presents his Flipper plugin to measure React-Native performances (UI & JS thread FPS) continuously and compute a score like Lighthouse.

He also shares 4 tips to help you measure performances on your apps. TIL about automating scroll with adb. All this is then applied in practice to a concrete use-case: his team improved the score of the TF1 app from 40 to 90.

Extras:

Partners

  • Start React Native: learn everything about gestures and animations with William Candillon
  • React-Native Weekly: stay up-to-date React-Native core updates
  • TypeScript Weekly: the best TypeScript links every week, right in your inbox.
  • ES.next News: learn about the latest in JavaScript and cross-platform tools
  • Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
  • G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
  • Infinite Red: US React-Native experts making your idea a reality
  • Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

Hello, CSS Cascade Layers

A nice intro to CSS Cascade layers, a new CSS feature to look forward! It looks like it is coming fast in our browsers, and even if you can't use it today (no polyfill), that's worth taking a look at it today.

CSS Cascade Laters give additional control on the CSS cascade, and the order in which CSS rules are applied. This can help fixing problems related to specificity, insertion order or reduce the need to use !important.

If you only have 1 minute, take a look at this animation. It's like if the browser re-ordered your styles instead of using the order defined in the CSS file. This also reminds me a bit hooks React 😅.

Why does it matter? Because bundlers and frontend tools don't have any clear rule to emit the bundled CSS in a correct predictible order. For example, with Webpack, CSS loaders, JS/CSS code-splitting, dynamic imports, CJS/ESM, do you really know in which order your CSS rules will be in the final page? Definitively not me! 🤷‍♂️

With this new feature, your CSS may become more portable. If you decide to use another bundler/tool someday, you don't want to have to rewrite everything and fix a ton of little CSS issues related to changes in the CSS insertion order: layers can prevent that.

There's a lot of activity on the CSS side these days. Also take a look at the Interop 2022 project: features that browsers plan to focus on this year regarding browser compatibility, including cascade layers!

Extras:

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!

ReactReact NativeJavaScriptTypeScript