This Week In React #79: React Doc, useId, Sandpack, Gatsby, Next.js, MDX, Expo, Chicane, Node.js, Yarn...
Rachel Nabors presented the new React documentation website in beta, greatly improving the React learning experience:
lots of illustrations,
interactive examplex (via CodeSandbox and Sandpack)
This was an ambitious project, started more than a year ago, with a full team working on it. We should know more about it soon, as team members are gathering questions from the community to write blog posts (Rachel Nabors, Jared Palmer).
The React doc site migrates from Gatsby to Next.js. One question was asked by a few people: why not choosing Docusaurus? Docusaurus follows the Pareto principle (20% efforts, 80% results). If you are ready to invest a lot of time and money to get a perfect doc site, Docusaurus might not be the best choice. Using Next.js is also better for the React team to dogfood upcoming React features. Read my detailed answer.
React 18 will include a new hook
useId() to make it easier to handle accessibility things like linking an input to its label thanks to
We can ask ourselves why this needs to be in React core, instead of an external package like
uuid. This is a complex problem to solve in userland, particularly when taking into account server-side rendering and streaming, as we must ensure that the generated id match on the client and server to avoid any hydration mismatch.
This new hook will be particularly useful for authors of accessibility libs and design systems, such as Reach-UI, React-Aria, Reakit, MUI, Chakra... Maybe you'll find it useful too if you need to support SSR in your company's design system?
Gatsby v4 has been officially released, with some highlights:
These features bridge the gap with Next.js, the actual React meta-framework leader. The Gatsby Cloud offering seems to be growing fast. There shouldn't be too much vendor lock-in: Deferrerd Static Generation from Gatsby looks like an implementation of Deferred Persistent Rendering from Netlify.
First release candidate for MDX, permitting to add JSX to your Markdown files and make the content more interactive. Used on the new React doc site, Docusaurus, sites of Josh Comeau, Kent C. Dodds...
A lot of significant improvements:
Building an awesome image loading experience: Kent C. Dodds explains how he handles loading images on his site with an inlined placeholder. Interesting details like why he didn't choose blurhash, and a nice trick to reduce base64 size by using an upscaled image + CSS blur filter.
A technical breakdown of React-Three-Fiber: permits to understand how to create a React custom renderer, by recreating R3f. Author is working on R3f for React-Native.
React-Chicane: new React router lib, leverating TypeScript template literal strings for tyypechecking url construction.
Official release for the new Expo SDK, that was in beta last week.
Added experimental support for Hermes on iOS along with Hermes inspector in Expo CLI
Expo recently made it way easier to integrate with native code. Now it's time to nudge us to write more native code, by making it easier.
"Sweet API" is an upcoming system based on a declarative Swift DSL permitting to interface the JS/native side more easily with JSI and automatic payload validation/conversion. This reminds me a bit Yup/Joi schemas for handling React forms.
react-native-native-runtime: allows direct access to the native runtime (fisrt Objective-C) via JSI, giving a lot of freedom. Not sure Apple will like this 😅
React-Native 0.67.0-RC2: it looks like the React-Native release cycle is becoming faster
rnx-kit: a React-Native toolbox from Microsoft
Even a company as successful as Shopify cannot make a great React Native App: criticism of React-Native with some interesting comments. For sure, handling the keyboard in React-Native is not always so easy 😅
Note that Node.js 16 is entering active LTS today!
Yarn 3.1: Corepack, ESM, pnpm, Optional Packages ...
Core Web Vitals Checker: shows you Real-User-Monitoring vitals of an url without installing anything, based on public Chrome User Experience Report dataset
Compromised Node.js lib: ua-parser-js: a widely used package (transitively) that may have compromised your computer :s
vscode.dev: your favorite IDE inside the browser
New DevTools in Chrome 95 (recently released)
TC39: the 86th meeting is in progress, proposals stage evolutions should be reported here