This Week In React #78: useState, useRef, Next.js, TypeScript, Fabric, Hermes, Harmony, Parcel, CORS, Volt...

React

Vladimir explains the differences between using multiple useState("value") with primitive values, or a big fat useState({...}). A deep analysis, discussing non-straightforward implications in terms of minification, batching, performance, atomic updates...

Vladimir says an excessive usage of React state can lead to performance problems (useless re-renders) and "render trashing". He explains in which case it's safe to replace useState by useRef, using gesture animations as an example (swipe, move...).

Vladimir explains that for some use-cases, exposing hooks with an imperative API is better. Betting all-on on the declarative paradigm can have some unwanted impacts, like useless re-renders. He takes UI hover interactions as an example, using setTimeout and debounce. Hooks library authors should rather expose both an imperative API for advanced use-cases, and build a declarative on top for simpler cases.

• React & TypeScript: how to type hooks: Pierre wrote an exhaustive intro to use TypeScript with React hooks.

• 4 Patterns You Can Focus On In Your React Code Reviews

• A Visual Guide to React Rendering - Cheat Sheet

• react-router v6.0.0-beta.7: the last beta before v6 stable?

• Next.js Conf: happens next week. The speakers list is available and quite long. Guillermo promised great announcements, I'm looking forward the keynote to include news about the Aurora Project with Google, React-18, streaming SSR, server components, perf, swc...

• React Advanced: another nice conf next week!

• Gatsby 4 and the Jamstack Endgame: Swyx' latest podcast

React-Native

Evan Bacon explains that bundling React-Native apps with Metro is a bit slow. Metro choose to transpile all the node_modules lib automatically by default (which IMHO can be convenient in the very beginning). The React-Native ecosystem developed itself around this anti-pattern, and most libraries are now published untranspiled on npm (with ES import/export). And now, each React-Native app has to transpile these libs with Babel, which is a versatile tool with a large plugin ecosystem, but is not the fastest.

Evan presents Metro Exotic Transformer: a solution to significantly improve build time (even on CI with cold caches): it will only use Babel for transpiling your app's code, and will use a faster tool (Sucrase) for the libs, eventually skipping transpilation for some packages (React, Lodash...). This new transformer is available in Expo CLI (experimental), but can be added to any React-Native project using Metro.

He also comments that Metro is slow on startup because of Haste, a proprietary Facebook module resolution system.

The React-Native team answered community questions on Reddit. Some important bits:

• The Fabric renderer should be available before the end of the year (in templates + install playbook)

• Hermes seems to be a very important piece: outside of startup performance improvements, it can also help unify the developper debugging experience, and reduce garbage collection pauses that may otherwise impact the Fabric synchronous renderer.

• The FlatList abstraction should be reworked, taking into consideration new contraints: hooks, Suspense, web compatibility...

Extras:

• Demo Harmony: Evan Bacon presenting a new bundler?

• Demo Skia: William Candillon presenting a backdrop filter

• One year of React Native Radio (Infinite Red edition)

• React-Native Windows 0.66

Other

New version of the Parcel bundler, keeping its no config philosophy , but showcasing an impressive list of features and plugins. Notable performance improvements (using Rust). v2 has the best core on bundlers.tooling.report, comparing the features of multiple bundlers.

Extras:

• How to win at CORS: Jake Archibald explains Cross-Origin Resource Sharing. Includes a playground.

• Jest-Extend v1.0: extends Jest with additional matchers. No big announcement: it was just time to release v1 for this already popular project.

• Nuxt 3 beta: the Vue frameworks now uses Vue 3, Vite and Nitro, a new "server engine" improving portability

• Covariance and Contravariance in TypeScript: difficult to grasp generics concept, worth studying at least once

• Jared Palmer recommends pnpm

• Addy Osmani recommends chunks JS between 30-50kb

• Volt: a WIP Rust package manager built by a 15 yo dev 🙉. Claims being faster than Yarn et npm.

• Serverless Cloud: the serverless framework now offers a managed service.

• GitLab went public

Stefan Baumgartner @ddprrt

Tabs vs spaces https://t.co/r5SVjdCh0e