Inside React Labs’ June 2022 Updates: Server Components, Offscreen, and New Docs

In mid‑June 2022 the React team published a blog entry summarizing the experimental work behind React 18, explaining why updates sometimes feel slow and outlining upcoming research topics.

Server Components

The experimental React Server Components (RSC) were announced in December 2020 and have been iterated on for React 18. The team switched from fork‑I/O libraries to an async/await model for better compatibility and moved from file‑extension boundaries to annotated boundaries. Collaboration with Vercel and Shopify is underway to unify bundler support for shared semantics across Webpack and Vite.

Interpretation: Server Components are a low‑level feature that the React team prefers to expose through ecosystem libraries rather than direct usage.

Asset Loading

Current scripts, styles, fonts, and images are pre‑loaded via external systems, which makes coordination across new environments (streams, server components) difficult. React is exploring a universal API to preload and deduplicate external assets, with optional Suspense support to prevent visual “pop‑in” effects while preserving streaming and concurrent rendering.

Interpretation: The new API aims to solve the “pop‑in” problem where page layout shifts dramatically as assets load, especially on image‑heavy pages.

Static Server Rendering Optimizations

While static site generation (SSG) and incremental static regeneration (ISR) provide cacheable performance, the team is investigating compiler‑based and static‑channel techniques to improve dynamic server‑side rendering (SSR) when only part of a page is cacheable.

Interpretation: These are performance‑focused enhancements for server‑rendered pages.

React Optimizing Compiler

React Forget, introduced at React Conf 2021, is a compiler that automatically generates equivalent useMemo and useCallback calls to minimize re‑renders while preserving the React programming model. The compiler has been rewritten for reliability, now capable of analyzing more complex patterns such as local mutations, opening new compile‑time optimization opportunities. A Playground is being built to let developers experiment with the compiler and see live output.

Interpretation: The compiler and its Playground make it easier to explore compile‑time performance optimizations.

Offscreen

Offscreen provides a third option for hiding UI: visually hide components while lowering their priority, similar to the CSS content‑visibility property. This lets React defer rendering hidden content until the main UI is idle, enabling instant transitions, reusable state, virtualized list rendering, and backgrounded content.

Instant transitions : pre‑fetch data and pre‑render the next screen while the user hovers over a link.

Reusable state : preserve component state across navigation.

Virtualized list rendering : pre‑render off‑screen list rows at lower priority.

Backgrounded content : lower priority for content that should stay hidden but remain ready.

Interpretation: Offscreen works like content‑visibility , allowing developers to improve page load performance without manually toggling CSS display properties.

Transition Tracing

React currently offers the Original Profiler and a beta Timeline Profiler (React 18) to visualize component updates. The team recognized the need for more granular interaction tracing to pinpoint slow commits. An earlier interaction‑tracing API was removed due to design flaws, and a new version—temporarily called Transition Tracing—is being built to address these issues.

Interpretation: The upcoming tracing tool will help developers track the full lifecycle of slow interactions and identify performance bottlenecks.

New React Docs

The new React documentation site entered beta last year, focusing on Hooks with updated diagrams, illustrations, interactive examples, and challenges. Development paused for React 18, but now the team is completing the rewrite, adding a detailed section on effects, and exploring a new useEvent RFC. Community feedback has been instrumental.

Interpretation: The revamped docs prioritize hooks, modern design patterns, and interactive learning, making React concepts more accessible.