What does the Activity component introduced in React 19.2 solve?

Direct answer

Activity lets React hide UI while preserving its internal state, clean up its Effects, and deprioritize hidden updates so the content can be restored or pre-rendered efficiently.

App.jsx

function App({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === "home" ? "visible" : "hidden"}>
        <Home />
      </Activity>

      <Activity mode={activeTab === "posts" ? "visible" : "hidden"}>
        <Posts />
      </Activity>
    </>
  );
}

Preserve state: hidden content can return with previous local state intact.
Clean Effects: Effects are cleaned up while the Activity is hidden and re-created when visible.
Background preparation: hidden content can still be rendered at lower priority so code/data may be ready before reveal.