React 19 is sliding in new experimental APIs, and <Activity> is one of those features that feels small but hits huge. If you've ever toggled a sidebar, switched a tab, or hid a data grid only to lose all your state — you know the pain.

The new <Activity> component is React's way of saying:

"What if hiding something didn't nuke its brain?"

🎉 Not a Medium member? No worries! Enjoy the full article for free using my Friend Link →

What <Activity> Actually Does

Instead of unmounting, <Activity> lets you switch between two modes:

  • mode="visible" → everything works as usual.
  • mode="hidden" → component is visually hidden (display: none) and effects are paused, but state + DOM stay intact.

That means your component is basically "sleeping" instead of "dead." Wake it back up, and it picks up exactly where it left off.

Example 1: Sidebar That Remembers

import { unstable_Activity as Activity } from "react";

function App() {
  const [isVisible, setVisible] = useState(true);
  return (
    <>
      <Activity mode={isVisible ? "visible" : "hidden"}>
        <Sidebar />
      </Activity>
      <button onClick={() => setVisible(v => !v)}>Toggle Sidebar</button>
    </>
  );
}

✅ Scroll position stays. ✅ Form fields don't reset. ✅ DOM doesn't get rebuilt.

Example 2: Tab Switch Without Rage-Quitting

<Activity mode={activeTab === "chat" ? "visible" : "hidden"}>
  <ChatWindow />
</Activity>

<Activity mode={activeTab === "settings" ? "visible" : "hidden"}>
  <SettingsForm />
</Activity>

Now, switching between Chat and Settings doesn't flush your unsent messages or half-filled forms. Each tab lives on in the background.

Example 3: Data Grids That Don't Forget

{rows.map(row => (
  <Activity key={row.id} mode={row.visible ? "visible" : "hidden"}>
    <Row data={row} />
  </Activity>
))}

Instead of re-rendering 1,000 rows when filters change, hidden rows stay intact. They're not burning CPU with effects, but they're ready to pop back instantly.

Why This Is a Big Deal

  • State stays alive → your users don't lose progress.
  • Performance boost → no heavy remounting cycles.
  • Effects paused → background work isn't wasting CPU/network.
  • Cleaner toggling → no CSS hacks like opacity: 0 or visibility: hidden.

The Catch ⚠️

  • It's experimental → you import it as unstable_Activity. React may change the API before release.
  • Hidden components still sit in memory → so don't go wild hiding huge trees.
  • Not a silver bullet → use it where state persistence really matters.

👋 Hey legends! If you're vibing with this series, smash those claps (yes, all of them 👏), hit Follow so you don't miss Part 6, and if this saves you hours of googling — maybe buy me a coffee ☕ so I can keep writing instead of debugging configs at 3 AM.

TL;DR ⚡

React 19's <Activity> lets you hide components without unmounting them. State + DOM stick around, effects pause, and when you bring them back, they pick up right where they left off. Perfect for sidebars, tab views, data grids, and any UI where progress persistence matters.

👉 Dive deeper in the official docs: react.dev/reference/react/Activity

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don't receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.

And before you go, don't forget to clap and follow the writer️!