React 19.2 just dropped a feature that’s small in appearance but massive in impact, the new <Activity /> component.
Think of it as giving your components the power to take a nap instead of being completely wiped out.
Up until now, when you wanted to hide or show parts of your UI, you’d usually reach for conditional rendering. It works, sure, but here’s the gotcha: once a component unmounts, everything inside it, its state, effects, and DOM, gets obliterated. When you bring it back, React rebuilds the whole thing from scratch.
Enter <Activity />.
Instead of unmounting, React can now pause a component, cleaning up its side effects while keeping its DOM and state safely tucked away in memory until you need it again.
// Before
{activeView === "list" && (
<NotesList
notes={notes}
onEdit={handleEdit}
onSelectNote={handleEdit}
/>
)
}
// After
<Activity mode={activeView === "list" ? "visible" : "hidden"}>
<NotesList
notes={notes}
onEdit={handleEdit}
onSelectNote={handleEdit}
/>
</Activity>
In React 19.2, Activity supports two modes: visible and hidden.
-
hidden: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. -
visible: shows the children, mounts effects, and allows updates to be processed normally.
This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen.
One Example to Rule Them All: A “Remembering” Note Editor
Let’s see <Activity /> in action with a simple two-view notes app.
Our app has:
- A Notes List view
- A Note Editor view
…and you can switch between them using buttons.
Inside the editor, we have:
- A textarea where users can type drafts (browser-managed DOM state).
- A “Show Details” toggle (React-managed state).
Now, in a typical React setup using conditional rendering, as soon as you hide the editor, both the draft text and toggle state vanish into the void. When you switch back, everything resets, not ideal.
What’s Different Now
With <Activity />, React doesn’t destroy the editor when you hide it, it just applies a display: none.
That means:
- Your React state (
showDetails) stays alive. - Your DOM state (the text you typed) stays exactly where you left it.
When you return, your note, toggle, and even your cursor position are waiting for you, no re-renders, no lost progress.
Why This Changes the Game
<Activity /> brings a new middle ground: “keep it alive, but deactivate it.”
It’s the perfect combo, your hidden components don’t hog performance, yet they don’t restart every time you bring them back.
This opens up a bunch of UX upgrades for:
- Modals or drawers that reopen with user input still intact.
- Multi-step forms that remember your progress.
- Tabbed or toggled layouts that switch instantly without a re-render hit.
It’s one of those upgrades that you don’t realize you’ve been missing until you try it.
Wrapping Up: Hidden, But Not Forgotten
React 19.2’s <Activity /> isn’t just another quality-of-life tweak, it’s a quiet redefinition of how React handles component lifecycles.
It softens the hard boundary between “mounted” and “unmounted,” giving developers finer control over what stays alive behind the curtain.
Hidden components are no longer “gone”, they’re simply napping.
And with that, React takes another step toward UIs that feel less like web pages, and more like living, breathing apps that remember you.
Find the complete documentation here:https://react.dev/
Blog post for React 19.2 https://react.dev/blog/2025/10/01/react-19-2
Top comments (2)
This is such a clean breakdown — especially the “napping instead of unmounting” analogy. The middle ground between mounted vs unmounted has been missing in React for years, and finally fills that UX gap. Keeping DOM + state intact without the performance hit is a game-changer for multi-view experiences. 🙌
Share you thoughts on the new React 19.2 updates in the comments