This Week In React

Share this post

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

substack.thisweekinreact.com

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

Sébastien Lorber
Oct 19, 2021
Share this post

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

substack.thisweekinreact.com

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

Twitter avatar for @ddprrt
Stefan Baumgartner @ddprrt
Tabs vs spaces https://t.co/r5SVjdCh0e
Image
8:49 PM ∙ Jan 18, 2023
Share this post

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

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing