React Labs: What We've Been Working On – June 2022

Summary

This post outlines ongoing React research and experimental work (not a shipping roadmap). Key efforts focus on Server Components, asset-loading primitives, server rendering optimizations, an optimizing compiler, an Offscreen API for deprioritizing hidden UI, improved tracing for interactions, and continued documentation updates (react.dev). Many items are experimental and may change before shipping.

Key Points

• Server Components (RSC)

  • Moving away from forked I/O libs toward an async/await model for better compatibility.
  • Replacing file-extension boundaries with explicit annotations.
  • Coordinating bundler semantics with partners (Vercel, Shopify) before stabilizing.

• Asset loading

  • Exploring React APIs to preload and deduplicate external assets (scripts, CSS, fonts, images).
  • Intend these APIs to work with Suspense so assets can block display without blocking streaming or concurrent rendering.

• Static and dynamic SSR optimizations

  • Researching compilation and static-pass techniques to accelerate server rendering when most content is cacheable.

• React optimizing compiler ("React Forget")

  • Rewritten compiler can generate memoization (useMemo/useCallback equivalents) and handle local mutation patterns.
  • A playground will accompany the compiler to inspect transforms and outputs.

• Offscreen API

  • New primitive to hide UI visually while deprioritizing its rendering work (preserves state like scroll position).
  • Enables patterns: instant transitions/prerendering, preserved route/tab state, virtualized list prerendering, and deprioritizing background content.

• Transition Tracing (interaction tracing)

  • Reworking the previous Interaction Tracing approach into a more accurate Transition Tracing (tied to startTransition) to attribute slow commits to interactions.

• Docs and primitives

  • react.dev work continues (effects section in progress) and the useEvent RFC is in early research; community feedback is requested.

Practical takeaways for engineers

• Expect experimental APIs and ecosystem coordination for RSC and bundlers; test on preview toolchains.
• Watch for new asset-loading APIs and Suspense integrations to reduce layout shifts.
• Offscreen can simplify preserving UI state and improve perceived performance for navigations and virtualized lists.
• The optimizing compiler may change runtime patterns—try the playground to learn generated transforms.
• Transition Tracing will provide better tooling to link slow interactions to root causes in profiling.