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.
Previous
What is React's use() hook in React 19?
Next
How does React Server Actions work in React 19?
More React.js Questions
View all →- Advanced How does React's reconciliation algorithm handle keys?
- Advanced What is the React Fiber architecture in depth?
- Advanced What are React rendering optimizations beyond React.memo?
- Advanced How do you implement an undo/redo system in React?
- Advanced What are React's concurrent features and how do Transitions work?