Activity

The problem

Unmount a tab and its typed text and counters are lost. Hide it with CSS and it stays alive, so its timers and network calls keep running in the background.

The pattern that fixes it

<Activity mode="hidden"> hides the tab but keeps its state, and pauses its effects until it is visible again. You get a remembered tab without the background work.

In plain words

When you switch tabs in a settings panel, something has to happen to the tab you left. You can throw it away (and lose what you typed) or just hide it (and let it keep working). Activity hides it and puts it to sleep.

Leaving a video game: unmounting is quitting without saving, CSS hiding is leaving the game running in the background draining the battery, and Activity is pausing it.

Terms

mounted

The component exists on the page and React holds its state.

effect

Code in useEffect that does work outside rendering, like a timer or a network subscription. It cleans up when it stops.

cleanup

The function an effect returns. React runs it when the effect stops, for example to clear a timer.

mode

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

Going deeper

How does it work?

In "hidden" mode React keeps the children's state, hides their DOM, runs every effect cleanup (timers stop, subscriptions close), and defers their re-renders until nothing more urgent is waiting. Switching back to "visible" shows the DOM again and re-runs the effects, so the component picks up with its old state.

Pitfalls

Hidden children still hold their state in memory, so do not wrap hundreds of heavy tabs. Because effects are cleaned up and started again, an effect must be safe to stop and restart (clear the timer, close the socket). Things outside React, like a playing video element, may not pause by themselves: pause them in an effect cleanup. Hidden content is also removed from view and from assistive tech, which is what you want for a background tab.

When not to use it, and alternatives

If a tab should start fresh every time (a wizard step, a modal form), unmount it on purpose, because remembering state is a bug there. If you only need to remember a value, lift that state up or put it in the URL instead of keeping a whole subtree alive. Activity is not a performance tool by itself and not a replacement for the React Compiler: it keeps things alive on purpose, while the compiler skips repeated work.

Keep learning

• Previous: useActionState
• Next: Uncontrolled register
• Related: memo
• Related: useMemo
• Related: useCallback
• Related: Custom hooks
• Related: useEffectEvent
• Related: useTransition

More courses

• Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
• Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
• Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
• System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
• Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
• Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
• Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
• CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
• Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
• Docker — What an image is, why layers cache, and how containers find each other on a network.
• Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.