What is the React Activity (Offscreen) API?

Answer

The Activity component (formerly Offscreen, experimental in React) allows rendering components in a hidden state — the component is mounted, its state is preserved, but it is not visible to the user. This enables instant-show UI by pre-computing and preserving component trees before they are needed. Use cases: tab panels (mount all tabs but only show the active one, preserving each tab's scroll position and state), virtual lists (preserve rendered items just off-screen), back-button navigation (preserve previous page state for instant back navigation). <Activity mode="hidden"><ExpensiveTab /></Activity>. In "hidden" mode: effects are not fired; the component is rendered but not painted; state is fully preserved. In "visible" mode: effects fire, content displays. How it differs from CSS display:none: React Activity truly controls when effects run and when the component participates in the React tree; CSS hide/show keeps the component mounted but does not pause effects. Status: still experimental as of React 18/19 — the API is subject to change. Available in experimental React builds.