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:

• 😘 Recommend it to your friends: it really helps!
• 💸 Sponsorise This Week In React
• 😍 Write testimonials on Twitter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

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:

• 📜 Remix upload to S3: using a Remix API to forward an upload stream directly to S3
• 📦 Remix Electron: Remix and Electron integration 🤔 seems interesting to reduce Electron boilerplate and provide better co-location of web + native code.
• 📦 Griffel: Microsoft's take on atomic CSS-in-JS, zero-runtime, typesafe. Reminds that we are still waiting for StyleX😏
• 📦 Jotai 1.6: expose store interface, atom sync with localStorage...
• 🗳 Next.js Developer Survey: official Vercel survey
• 💡 Next.js RFC: Switchable Runtime: SSR in Next.js is historically based on a Node.js runtime. They plan to introduce a global and per-route config to enable the Edge runtime. This is interesting in many ways: enable streaming SSR, lower latency... Note that Remix already has this somehow thanks to its adapter layer.
• 💡 Gatsby RFC: Ahead of Time Compilation for config files: to support config files in TypeScript. FYI I found an interesting package for this use-case bundle-require
• 💡 Flat file system for file-based routing: strong and original opinions of Jamie Kyle about file-system routing conventions 🤔
• 📖 Partytown + Hydrogen: new integration doc
• 🐦 Remix: animated page transitions with useOutlet(): Outlet is a nice solution to avoid layout unmounts/remounts, making it much easier to implement page transitions
• 🎥 Remotion Update - February 2022
• 📜 Hydrogen & Tailwind: The Perfect Match: from Shopify, a bit of React, mostly Tailwind
• 📜 Svelte vs. React in 2022: Choosing the Best Match for You

💸 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:

• 📜 4 years as a React Native OSS maintainer: a retrospective: being a maintainer is not always easy 😅
• 📜 Calling Windows APIs from React Native just got easier: Microsoft introduces a new React-Native package to call any WinRT API directly from JS in a very flexible way, without any additional boilerplate. Note that a similar initiative exists for iOS (react-native-native-runtime) but not sure Apple would approve 😝
• 📜 React Native for Windows is helping Settings improve more quickly: Microsoft's feedback on a concrete cross-platform use-case where they share code between desktop (using the WinRT package above) and web
• 🎥 Orta Dev Diary 2 - React Native Web
• 🎙️ RNR 226 - GraphQL in React Native

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:

• Announcing TypeScript 4.6 RC: great improvements on Control Flow Analysis, very nice for React
• Typescript - (ReadOnly) NotEmptyArray: useful tuple technique to know: [T, ...T[]];
• Assertion Functions in TypeScript: useful feature for type-narrowing
• "Extract in TS can be used to query a member of a union type."
• SWC v1.2.139: introduce new Rust plugin system
• Why I prefer JS for front-end build automation: for sure it's better than bash 😅
• npm RFC: Package Distributions: suggest new solutin for lib authors that need to distribute platform-specific binaries. Looks useful for modern tooling in Rust, Go...
• Node.js 17.5.0: fetch (behind flag), JSON modules
• Jest v28.0 alpha: ligher, remove deps JSDOM, Jasmine
• AbortController -> TaskController: assign priority to JS tasks?
• Parcel 2.3 + Parcel CSS 1.3 + Webpack integration example
• EdgeDB 1.0 with a query builder TypeScript
• Rome Formatter and Rust Update: initial focus seems to be on a code formatter that will try to sync with Prettier.
• Flutter in 2022: strategy and roadmap: improvements planned on web support
• Vite 2.8
• ESLint 8.9
• Is Turborepo overhyped?
• Move over JavaScript: Back-end languages are coming to the front-end
• Storybook: Component Encyclopedia beta
• Static Files on Deno Deploy
• Debugging JavaScript
• Inside the JavaScript Engine
• Design system versioning: single library or individual components?
• How not to learn GraphQL
• Implementing A Svelte Store In Rust
• The first developer preview of Android 13
• Server-Sent Events: the alternative to WebSockets you should be using