This Week In React #78: useState, useRef, Next.js, TypeScript, Fabric, Hermes, Harmony, Parcel, CORS, Volt...
React
React & TypeScript: how to type hooks: Pierre wrote an exhaustive intro to use TypeScript with React hooks.
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 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
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
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.