Hiding Without Losing State: Activity

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

<Activity>

A React 19.2 component that can hide its children without removing them, keeping their state.

mode

Activity's prop: "visible" shows the children, "hidden" hides and pauses them.

Unmount

React removing a component completely: its state and DOM are destroyed and effects cleaned up.

Pre-rendering

Rendering content in the background before it's shown, so it appears instantly later.

Effect cleanup

The function an effect returns, which stops what the effect started (timers, subscriptions, connections).

Low priority

Work React does only after everything visible is done, so it never slows down the screen.

1. 1

   Compare with conditional rendering

   In the first example, replace the Activity with {tab === "chat" && <Chat />}. Predict the last log line (Draft value:). It's empty, because Chat was unmounted. Note also that the display: line now throws, because the input no longer exists: wrap it in if (el).

2. 2

   Pause a timer while hidden

   Add a useEffect to Chat that logs tick every 200 ms with setInterval and clears it in the cleanup. Raise wait to 1500 and switch to Home. Predict: ticks stop while hidden and restart when you return.

3. 3

   Memoise the hidden tree

   In the pre-render example, wrap Reports in memo. Predict the log after the click: the second Reports rendered line disappears, because its props didn't change.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem it solves. The usual way to hide something is conditional rendering: {tab === "chat" && <Chat />}. When the condition becomes false, React unmounts Chat: its state (the draft message, scroll position, form fields) is destroyed, and showing it again starts from scratch, re-running its setup and data loading. Hiding with CSS (style={{ display: "none" }}) keeps the state, but the hidden component keeps running: effects stay subscribed, timers tick, and every update re-renders it at full priority.

2. 2

   **<Activity>** (imported from react, React 19.2) is a boundary with a mode prop: "visible" (the default) or "hidden". <Activity mode={tab === "chat" ? "visible" : "hidden"}><Chat /></Activity>. When hidden: React keeps the component's state and its DOM, and hides the DOM with display: none (by setting the style on the top DOM nodes inside the boundary). When visible again, everything is exactly as it was.

3. 3

   Effects in hidden trees. When content becomes hidden, React runs the cleanup of every effect inside it (useEffect and useLayoutEffect), as if it had unmounted, but keeps the state. When it becomes visible, React re-runs the effects, as if mounting again. So subscriptions, timers and connections stop while hidden. This is the same mount → cleanup → mount pattern StrictMode tests in development (Topic 7.4), so components with correct cleanups already work. Things that aren't effects don't stop on their own: a playing <video> keeps playing when hidden with display: none, so pause it in an effect cleanup.

4. 4

   Hidden content still renders, at low priority. If a hidden tree receives new props, React re-renders it in the background, at the lowest priority, after all visible work is done, so it never slows down what the user sees. Its effects don't run until it becomes visible.

5. 5

   Pre-rendering. You can render content that hasn't been shown yet with mode="hidden". React renders it in the background and creates its DOM, so showing it later is instant. If the hidden content suspends (lazy code or data with Suspense-enabled sources, Topic 14.3), React loads it in the background too, without showing a fallback. Effects don't run during pre-rendering, so data fetched in useEffect won't start until it's visible: pre-rendering helps with code and Suspense-enabled data, not effect-based fetching.

6. 6

   When to use it. Tabs, sidebars and multi-step forms where users switch back and forth and expect their place to be kept; pre-rendering the likely next screen; keeping a back-navigated page alive. Each hidden tree costs memory (its state and DOM stay), so don't keep dozens of heavy screens hidden. For a list of many items where state can be recreated, conditional rendering is still simpler.

• ↔

  Activity keeps users' place and makes switching instant, at the cost of memory for every hidden tree and some low-priority background rendering.

• ↔

  Pre-rendering makes the next screen instant but spends CPU and bandwidth on screens the user may never open.

• I can hide content with Activity and keep its state.

• I can explain what happens to effects when content is hidden and shown.

• I can pre-render a likely next screen.

• I can compare Activity with conditional rendering and CSS hiding.

• I know to write effect cleanups so hidden content truly pauses.