This Week In React #79: React Doc, useId, Sandpack, Gatsby, Next.js, MDX, Expo, Chicane, Node.js, Yarn...
React
Rachel Nabors presented the new React documentation website in beta, greatly improving the React learning experience:
hooks-first
lots of illustrations,
interactive examplex (via CodeSandbox and Sandpack)
challenges
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.
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.
A lot of significant improvements:
Extras:
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.
React-Native
Official release for the new Expo SDK, that was in beta last week.
Extras:
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 😅
Other
Note that Node.js 16 is entering active LTS today!
Extras:
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