React Labs: What We've Been Working On – March 2023

Summary

This March 2023 React Labs update covers progress on React Server Components (RSC), Suspense-aware asset loading, document metadata handling, the React optimizing compiler ("React Forget"), and offscreen rendering. The post describes spec and implementation progress, practical trade-offs (bundler integration, runtime constraints), and what engineers should expect next.

Key Points

• React Server Components

  • RFC merged; "use client" convention settled. Async/await is the primary data-fetching model for Server Components.
  • A new use hook is planned to unwrap Promises on the client; Server Actions will let you pass server-side functions across the client/server boundary to implement RPC and progressively enhanced forms.
  • RSC shipped in Next.js App Router as a reference integration; building other RSC-compatible frameworks is possible but requires deeper bundler primitives.

• Asset loading & Suspense

  • Working to integrate Suspense with stylesheet/font/image loading so React can consider those assets when deciding whether content is ready, reducing layout shifts.
  • Manual preload APIs for assets (e.g., fonts) from components are planned as an optimization.

• Document metadata

  • Built-in support is being added to let you declare <title>, <meta>, and <link rel="metadata"> tags anywhere in the tree, working across CSR, SSR, and RSC without workaround hacks or two-pass rendering.

• React optimizing compiler (React Forget)

  • Reframing as an automatic reactivity compiler that reduces unnecessary re-renders by tracking semantic value changes rather than shallow identity.
  • Compiler iterated significantly, now in limited production use at Meta; public release planned after hardening. Primary integration surface will be tooling plugins (Babel wrapper exists). Initially supports a representative subset of JS and logs diagnostics for unsupported patterns.

• Offscreen rendering

  • New capability to render React trees offscreen with low overhead (like content-visibility but for full components). Use cases: prerendering router screens, preserving tab state, virtualized lists, modal background mode.
  • Intended to be consumed via routers and UI libraries so most app authors won’t need to use low-level APIs directly.

What this means for engineers

• If you build frameworks or bundlers: expect to add RSC-aware bundler primitives to split module graphs between server and client.
• If you build apps: consider adopting RSC through frameworks like Next.js App Router, watch for the use hook and Server Actions for simpler server RPC, and plan for improved asset loading with Suspense.
• If you build libraries: prepare to integrate offscreen rendering and metadata primitives so applications can opt in without API churn.

Next steps & signals to watch

• Public details and tooling for Server Actions and the use hook.
• Bundler updates and primitives for RSC-compatible builds.
• Open-sourcing of the React Forget compiler after production validation.
• Implementations that wire Suspense to stylesheet/font/image readiness and expose preload APIs.