React Canary Activity: Hide UI Without Unmounting and Preserve State Instantly

What is `<Activity />`?

React has introduced a new component, <Activity />, in the Canary release channel. It provides a way to hide parts of your UI without unmounting them. Unlike conditional rendering or CSS hacks, <Activity /> preserves the DOM and state while cleaning up side effects (Effects) when hidden, and then restores them instantly when made visible again.

Resources:

What is changing?

Most React apps hide UI with conditional rendering:

{isOpen && <Sidebar />}

This works, but it unmounts the component and discards local state. Switching back means rebuilding everything from scratch.

Others rely on CSS:

.sidebar {
  display: none;
}

This preserves DOM and state but leaves Effects running, which can cause memory leaks and stale work.

<Activity /> combines the best of both:

Hides via display: none.
Preserves DOM and state.
Cleans up Effects while hidden.
Restores instantly when shown again.

How it works

import { unstable_Activity as Activity } from "react";

<Activity mode={isOpen ? "visible" : "hidden"}>
  <Sidebar />
</Activity>

mode="visible" or "hidden" toggles visibility.
Hidden trees are still in the DOM but not visible.
State is preserved, Effects are paused, and restored on show.
React schedules hidden updates at lower priority, so your app stays responsive.

Use cases

Tabs, drawers, and sidebars — Keep scroll, inputs, and local state intact when toggling views.
Pre-render hidden UI — Background-render likely next screens for instant reveal.
Performance during load — Render non-critical panels hidden, ready for use later.
Draft restoration — Users won’t lose input when flipping between sections.

How it compares

Approach	DOM preserved	State preserved	Effects paused
Conditional rendering	No	No	N/A
CSS `display: none`	Yes	Yes	No
`<Activity />`	Yes	Yes	Yes

Conditional rendering: Unmounts the component, state lost.
CSS display: none: Keeps DOM/state but Effects still run.
Suspense / Transitions: Handle async rendering and update priority; <Activity /> handles visibility + lifecycle.

Caveats

Hidden subtrees still re-render at low priority — don’t background giant, fast-changing trees unnecessarily.
Effects at higher levels (outside the Activity) won’t be paused.
When combined with View Transitions, showing an <Activity /> inside a transition will trigger enter/exit animations.

Try it today

Install the canary version:

npm install react@canary react-dom@canary

And test the new feature:

<Activity mode={isOpen ? "visible" : "hidden"}>
  <Panel />
</Activity>

Note: Import via unstable_Activity in Canary. The API will stabilize before the semver release.

Bottom line

React’s <Activity /> is a new primitive for visibility management:

Hide without unmounting
Preserve DOM and state
Pause side effects while hidden

It’s a small API, but it solves one of the most common UI pain points. With <Activity />, React continues its trend of making async and stateful UI a first-class concern.

What is <Activity />?