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.

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 htmlFor={id}.

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:

• Deferred Static Generation

• Server-Side Rendering

• Parallel Query Running

• Preparing support for React 18

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:

• More intuitive syntax to interleave MD and JSX

• Better compat with CommonMark

• Support of multiple JSX runtimes: React, Preact, Vue...

• Many perf improvements (runtime, build-time...)

• TypeScript types

• Dogfood, preparing for React Server-Components

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.

• Remotion 2.5

• Sunil Pai: how I'd build a react framework today

• Next.js is working on URL module imports

• Create a window manager with React

• 🎥 Temporal: React for the Backend

React-Native

Official release for the new Expo SDK, that was in beta last week.

• Improved and simplified Expo module infrastructure

• Added experimental support for Hermes on iOS along with Hermes inspector in Expo CLI

• Metro Exotic Transformers (experimental)

• Updated React Native to 0.64.2 and React to 17.0.1

• Various other things

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.

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

• react-native-testing-library 8.0

• 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 😅

• 🎧 React Native News #9

• 🎧 React-Native-Radio #15: iOS Native Components

Other

Highlights aer:

• Additional promisified APIs

• Stack traces with Node.js version

• OpenSSL 3.0 support

• V8 JavaScript Engine is updated to 9.5

Note that Node.js 16 is entering active LTS today!

Extras:

• How do you type a higher order function in TypeScript?

• 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

• New HTTP standards for caching on the modern web

• 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

Ricky @rickhanlonii

https://t.co/6a98DidOPY