This Week In React #94: 2 years 🥳️, memoization, composition, Remix, Next.js, Gatsby, React-Native, Windows, CSS, TypeScript, npm, SWC...
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
📜 Hydrogen & Tailwind: The Perfect Match: from Shopify, a bit of React, mostly Tailwind
💸 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
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?
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
Move over JavaScript: Back-end languages are coming to the front-end
Design system versioning: single library or individual components?
Server-Sent Events: the alternative to WebSockets you should be using