What is the React Activity (Offscreen) API?
Why Interviewers Ask This
Advanced questions like this reveal whether a candidate has internalized React.js deeply enough to make architectural decisions. Strong answers demonstrate both breadth and depth of experience.
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.
Pro Tip
This topic has React.js-specific nuances that differ from general programming. Highlighting those nuances in your answer shows expertise rather than generic knowledge.
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?