Persistent transient UI
Keep a sidebar’s input state when users temporarily close it.
React 19+ · Component
Activity
<Activity> hides or reveals children while preserving their UI, internal state, and DOM. Hidden boundaries clean up Effects and process updates at lower priority; visible boundaries restore state and recreate Effects.
- Since
- 19.2
How it works
Activity controls whether children are visible while preserving their UI and internal state. In hidden mode React applies display:none, cleans up Effects and subscriptions, and renders updates at lower priority; showing the boundary restores prior state and recreates Effects.
Syntax
<Activity mode="visible" | "hidden">{children}</Activity>Parameters
| Name | Type | Description |
|---|---|---|
children | ReactNode | The UI you intend to show and hide. |
mode | 'visible' | 'hidden' | A string value of either 'visible' or 'hidden'; omitted defaults to 'visible'. |
Returns
A React element that controls visibility and state preservation for its children.
Key points
- Activity preserves a child subtree’s UI and internal state across visibility changes.
- Set mode to visible or hidden to control the boundary.
- Leaving mode out makes the Activity boundary visible by default.
- Returning to visible restores prior child state and recreates its Effects.
- The hidden subtree’s DOM remains preserved, which supports retaining transient UI such as input values.
Common mistakes
- Hidden children remain in the DOM but are not visually displayed.
- Effects and active subscriptions do not remain running while the boundary is hidden.
- Hidden content can still receive updates, so hiding it does not freeze all rendering.
Example: Preserve a hidden sidebar
import { Activity, useState } from 'react';
function Sidebar() {
const [query, setQuery] = useState('');
return <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search" />;
}
export default function App() {
const [isShowingSidebar, setIsShowingSidebar] = useState(true);
return (
<>
<button onClick={() => setIsShowingSidebar(v => !v)}>Toggle sidebar</button>
<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
<Sidebar />
</Activity>
</>
);
}Toggle visibility while preserving the sidebar’s DOM and input state.
When to use it
Background rendering
Prepare likely-next content without giving it the same priority as visible content.
Fast return navigation
Retain tab or panel state while switching between sections.
Interview questions
QHow does Activity differ from conditional rendering?
Activity provides a visibility boundary with two modes: visible and hidden. Hidden children use display:none, their Effects are cleaned up, and updates are deprioritized; visible mode restores the previous state and recreates Effects.
Follow-up: Why use Activity instead of conditional rendering? Activity preserves the hidden subtree’s UI, state, and DOM for later restoration.
QWhat props does Activity accept?
The mode prop accepts either 'visible' or 'hidden', and omitting it defaults to 'visible'. The children prop is the UI controlled by the boundary.
Follow-up: What should be considered when hiding content that has Effects? Its Effects are destroyed while hidden and recreated when it becomes visible, so cleanup and setup must be correct.
QWhen is Activity a useful performance pattern?
Activity is useful for keeping likely-to-return UI ready, such as a sidebar or tab panel. Hidden content can continue rendering from new props at lower priority without competing equally with visible content.
Follow-up: How can this improve navigation? It can preserve transient UI state, such as form inputs, while keeping hidden work lower priority.
Related
ActivityuseState