React Labs: What We've Been Working On – February 2024

Summary

This React Labs update (2024-02-15) highlights four threads: React Compiler graduating from research into production (now powering instagram.com) with an upcoming open‑source release; Actions (an expanded Server Actions surface) landing in React Canary to simplify client/server form and mutation handling; Canary-staged features (Server Components, Asset Loading, Document Metadata, directives); and the plan to release React 19 as the next major version with some breaking changes (including Web Components support).

Key Points

• React Compiler

  • Compiler is production-ready on instagram.com and will be open sourced; it optimizes re-renders by modeling JavaScript and React rules.
  • Engineers: enable Strict Mode and the React ESLint plugin to surface rule violations and improve compatibility with the compiler.

• Actions (now in Canary)

  • Actions let you attach functions to DOM elements (e.g., <form action={fn}>), work client- or server-side ('use server'), and integrate with React transitions.
  • New hooks: useFormStatus, useActionState, and useOptimistic (optimistic updates that auto-revert on commit).
  • Use async/await within transitions to show pending UI across async submission and update application.
  • Library authors: support action-style props (useTransition) to provide a consistent API surface.

• React Canary features and docs

  • Canary includes Server Components, Asset Loading (Suspense-aware resource loading + preload/preinit), Document Metadata (title/meta/link anywhere), and directives ("use client" / "use server").
  • These features are documented on react.dev and are intended to be shipped together to avoid partial, unusable releases.

• React 19 roadmap

  • react@canary is intended to become react@latest as React 19; because Asset Loading and Document Metadata can be breaking, the next release will be a major version.
  • Expect additional breaking changes (e.g., Web Components support); migration docs and upgrade guidance will be published before release.

• Activity (formerly Offscreen)

  • Renamed to better reflect active/inactive semantics; still experimental and deprioritized while higher-priority features ship.

Practical next steps for engineers

• Try React Canary to opt into features early and follow react.dev docs.
• Turn on Strict Mode and install/configure the React ESLint plugin to prepare code for the Compiler and new APIs.
• If you maintain component libraries, add action-style props and guide users toward useTransition for consistent behaviour.
• Watch for React 19 migration guides before upgrading production deployments.