This Week In React #80: Next.js 12, Edge Functions, useMyContext, Hermes, React-Freeze, Skia, Drispy, Bun, TC39, Cloudflare...

React

Next.js 12 has been announced at the Next.js conference. I advise to at least watch the 30min keynote to have a nice overview of all the announcements (some of them are not covered in this blog post). A beautiful release with a lot of exciting innovations, exposing the vision: an outstanding DX with great performances by default, and the power of dynamic with the speed of static.

The new Rust compiler SWC has been enabled to replace Babel (unless you use a custom Babel config), and improves significantly build/refresh times, particularly on large projects. Unlike esbuild, SWC is more modular and aims to expose a plugin API in the future. However we'll need to wait a bit until all our favorite Babel plugins are ported to Rust/SWC. The Next.js team plans to work first on support for Styled-Components, Emotion and Relay.

A new middleware system permits to support many use-cases: redirects, analytics, auth, feature flags, AB-testing... This is built on a new Edge Functions infrastructure (details below).

Experimental support for React 18 features React.lazy server-side, streaming SSR (with the new Edge Functions infra), and React server components, that I didn't expect so soon 😍. They also work on a <Data> component (similar to <Suspense>) and a per-component caching system.

ES modules support, with URLs imports, permitting to import code (or assets/images) directly from ES-compatible CDNs like Skypack, or next-gen design tools like Framer (Handshake).

I totally agree with this article proposing to add an extra abstraction layer on top of React context, with useMyContext() and <MyContextProvider> . There are a lot of reasons to introduce a bit more indirection, and this article presents good examples to motivate you to do so.

• 🎥 Next.js conf 2021: the complete Youtube playlist. The 30min keynote is a good summary of the announcements, but there are a lot of other interesting talks (can't watch all 😅)

• 🎥 Next.js 12 is a Beast: Fireship's 5min video, good TLDR of all the announcements if you don't have time!

• How to Use Next.js Middleware: a great interactive article presenting example usages of the new Next.js middelware system, including some funny examples like selecting the user theme according to current user sunlight

• Building an effective Image Component: the Google Aurora team explains some design decisions behind the Next.js Image component, to nudge users to adopt best practices

• Use Next.js 12 on Netlify: Netlify already supports the new middleware system, using its own Edge infrastructure

• Next.js Stories RFC: an interesting RFC proposing to integrate Next.js with Storybook, with an interesting feature to generate stories automatically.

• React.js conf 2021: registrations are open. Under the hood using the open-sourced Virtual Event Starter Kit by Vercel.

• 🧵 Everything @vercel announce for Next.js 12 in simple terms

• Why hooks are the best thing to happen to React

React-Native

We saw this coming: Hermes will very likely become the default JavaScript runtime for React-Native, across all platforms! And will replace JSC (JavaScriptCore), the current default engine used by iOS/Safari. Reminder: the Hermes engine has been known to improve significantly the app's TTI (Time-To-Interactive) by compiling to bytecode at build time (AOT/Ahead -Of-Time), but it's not its only advantage anymore:

• The new Hades garbage collector seems very important for the new React-Native architecture with the Fabric synchronous renderer, to avoid blocking the UI thread for too long

• A babel plugin should improve the TTI even more!

• Permits to have the best integration with JSI

• Improves and normalize the DX and debugging experience

When using a stack navigation, screens are stacking on top of each others. But if screens consumes shared state (with Context, Redux...), it is likely that React re-render invisible screens, and updates for the screen at the top of the stack are delayed.

React-Freeze is an experimental library by Software Mansion, permitting to temporarily freeze invisible screens to avoid useless work and ensure updates of the top-level screens are done as soon as possible. This is now included in React-Native-Screens (and thus React-Navigation), and can be enabled very easily.

🧵 Rick Hanlon explains that in the futur React could natively deprioritize updates for invisible screens and components (not only stack, but also ScrollView...).

Extras:

• Demos Remotion + Skia: William Candillon tweeted 3 new demos of his Skia renderer working on the web through Remotion. We can deduce this renderer will have a cross-platform abstraction, enabling to render everywhere Skia is supported.

• Dripsy v3: Fernando Rojo announced a new version of his lib aiming to simplify cross-platform development with React-Native (unstyled responsive UI primitives). Greatly improved TypeScript autocomplete experience. He also presented a talk about that at the Next.js conf .

Other

Vercel is now proposing Edge Functions to complete its existing serverless offer. Those Edge Functions are based on Cloudflare Workers, using V8 isolates running at the edge, close to the users, supporting streaming, without cold boot latency. This is different from their existing Serverless Functions offer (based on AWS Lambdas and Node.js).

To sum up: Vercel builds better DX on top of Cloudflare Workers, in the same way they did with AWS. This article is a good explanation to understand the differences between the 2 function types they now offer: Vercel Serverless Functions vs Cloudflare Workers.

Note that unlike Vercel, Netlify built its own infrastructure for its Edge Handlers. 🧵 A Netlify dev comments the Vercel + Cloudflare Workers integration.

A summary of the JavaScript proposals that progressed recently. Error Cause is already stage 4 ! Array grouping is stage 2. Good progress on some Intl APIs, and multiple RegExp proposals now in stage 1.

Extras:

• Custom Headers for Cloudflare Pages: Cloudflare Pages now uses _redirects and _headers file like Netlify. I don't know if there's a 100% compatibility, but this look interesting to improve portability across modern cloud providers, and would be great if this became a standard.

• "I want Bun": the passphrase to type if you want early access to the new trending bundler/toolchain written in Zig, with some inspirations from esbuild. Not production-ready but benchmarks looks great.

• 🧵 Dan Abramov shared opinions about Tailwind

• Type | Treat 2021: Orta published some spooky TypeScript code challenges for Halloween

• Supercharge Your NodeJS With Rust

• Reimagine Atomic CSS

• The CSS-in-React Landscape

Twitter Dev @TwitterDev

Doctors: Googling stuff online does not make you a doctor Developers: https://t.co/mrju5ypPkb