Hiding and pre-rendering with Activity

Hide part of the page without losing it

Apps hide things all the time: the tab you aren't on, a closed sidebar, the page behind a dialog. When the reader comes back, they expect it as they left it. <Activity> is a component that comes with React for this. You wrap part of the page in it and give it a mode: "visible" shows its children, "hidden" hides them but keeps them. Here a support app has two tabs. The result is live: write something in the chat box, open Profile, then come back to Chat.

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  return (8    <>9      <nav>10        <button onClick={() => setTab("chat")}>Chat</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      <Activity mode={tab === "chat" ? "visible" : "hidden"}>14        <Chat />15      </Activity>16      <Activity mode={tab === "profile" ? "visible" : "hidden"}>17        <Profile />18      </Activity>19    </>20  );21}

Your message is still there. Line 1 imports Activity from React. Line 6 keeps which tab is open. Lines 13 to 15 wrap Chat in an Activity boundary whose mode is "visible" while the chat tab is open and "hidden" otherwise, and lines 16 to 18 do the same for Profile. The draft lives in Chat's own state, on line 4 of the Chat.jsx tab.

Both tabs are in the page the whole time. The hidden one is still mounted, still has its state, and still has its DOM elements; React only hides those elements. Activity became a stable part of React in React 19.2, with these two modes.

Conditional rendering throws the tab away

The usual way to show one tab is conditional rendering with &&. Here is the same app written that way. Write a message, open Profile, and come back:

1import { useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  return (8    <>9      <nav>10        <button onClick={() => setTab("chat")}>Chat</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      {tab === "chat" && <Chat />}14      {tab === "profile" && <Profile />}15    </>16  );17}

The draft is gone, and the counter under it says 0 characters. When you open Profile, line 13 renders false instead of <Chat />, so React unmounts Chat: it removes its elements and throws its state away. Coming back renders a brand-new Chat, whose state starts at useState("") again. As Preserving and resetting state showed, React keeps state only while a component stays at its place in the tree.

Sometimes that's what you want, like a form that should start empty each time it opens. When it isn't, people reach for workarounds: lift the draft up to the parent, or save it somewhere. Activity keeps it where it is, without changing Chat at all.

A hidden tab keeps its state and its DOM

Some of what a reader leaves behind isn't in React state at all. It lives in the DOM elements themselves: the text in a <textarea> without a value prop, whether a <details> section is open, how far a list is scrolled. Because Activity keeps the elements, it keeps those too:

1import { Activity, useState } from "react";2 3function Notes() {4  return (5    <section id="notes">6      <details>7        <summary>Shipping help</summary>8        <p>Orders ship in 2 days.</p>9      </details>10      <textarea placeholder="Your notes" />11    </section>12  );13}14 15export default function SupportApp() {16  const [showNotes, setShowNotes] = useState(true);17  function logStyle() {18    console.log(document.getElementById("notes").getAttribute("style"));19  }20  return (21    <>22      <button onClick={() => setShowNotes(!showNotes)}>{showNotes ? "Hide" : "Show"} notes</button>23      <button onClick={logStyle}>Log the style</button>24      <Activity mode={showNotes ? "visible" : "hidden"}>25        <Notes />26      </Activity>27    </>28  );29}

Lines 6 to 9 are a <details> section, and line 10 a <textarea> with no value and no state: React never knows what you type in it. Open Shipping help, type a note, then press Hide notes and Show notes. The section is still open and your note is still there, because the elements never left the page.

Press Hide notes again, then Log the style. Line 18 logs the style attribute of the section, and the console says display: none !important;. Show the notes and log it again: it's now empty. That one style is all React does to the DOM to hide it. Here is the code that does it in React DOM, from ReactFiberConfigDOM.js:

export function hideInstance(instance: Instance): void {
  // TODO: Does this work for all element types? What about MathML? Should we
  // pass host context to this method?
  instance = instance as any as HTMLElement;
  const style = instance.style;
  // $FlowFixMe[method-unbinding]
  if (typeof style.setProperty === 'function') {
    style.setProperty('display', 'none', 'important');
  } else {
    style.display = 'none';
  }
}

export function hideTextInstance(textInstance: TextInstance): void {
  textInstance.nodeValue = '';
}

In plain words:

1. Line 1: hideInstance gets one DOM element, the top element of something to hide. React calls it for each top element inside the hidden boundary, not for every element.
2. Lines 2 and 3 are a note from React's team, and line 6 a note for their type checker.
3. Lines 7 and 8 set display: none with important, so the page's own CSS can't show it again.
4. Lines 9 and 10 are a fallback for elements whose style has no setProperty.
5. Lines 14 to 16: plain text has no style, so hideTextInstance empties the text instead. A hidden component that returns only text shows nothing.

When the boundary is visible again, React's unhideInstance, a few lines further down, puts back the element's own display from its style prop, or clears it when the prop doesn't set one.

Effects stop while a tab is hidden

A hidden tab keeps its state, but nothing in it should keep running: no open chat connection, no timer, no subscription. So Activity cleans up a hidden tab's effects. Here the chat tab connects to a room in an effect, in the Chat.jsx tab, and counts the seconds it has been online. Open the console under the result first:

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  const [room, setRoom] = useState("#general");8  return (9    <>10      <nav>11        <button onClick={() => setTab("chat")}>Chat</button>12        <button onClick={() => setTab("profile")}>Profile</button>13        <button onClick={() => setRoom("#orders")}>Move to #orders</button>14      </nav>15      <Activity mode={tab === "chat" ? "visible" : "hidden"}>16        <Chat room={room} />17      </Activity>18      <Activity mode={tab === "profile" ? "visible" : "hidden"}>19        <Profile />20      </Activity>21    </>22  );23}

In the Chat.jsx tab, the effect on lines 8 to 15 logs Connect to #general, starts a timer that adds one to seconds every second, and returns a cleanup that logs Disconnect from #general and stops the timer. Line 6 logs every render, so the console line Chat renders for #general counts up with every tick. Try this:

1. Wait for online for 3 s, and type a draft.
2. Open Profile. The console prints Disconnect from #general: hiding ran the cleanup. The render count stops growing, because the timer stopped.
3. Wait a few seconds and open Chat. The console prints Connect to #general again, and the heading shows the same number of seconds as when you left, then counts on. Your draft is there too. The state was kept; only the effect stopped and started again.

You'll also see a Disconnect and a second Connect right when the chat appears, at the start and each time you come back. That's StrictMode in development: it runs a new effect, its cleanup, and the effect again, to check that your cleanup undoes the effect. It does the same when Activity shows a tab again. In production, each line appears once.

Hidden content still renders when its props change. Open Profile, then press Move to #orders (line 13 changes the room prop). The console prints Chat renders for #orders while the chat is hidden, but no Connect: React renders the hidden tab so it's up to date, at a lower priority than anything on screen, and runs its effects only when you open it. Open Chat, and it connects to #orders.

One case needs your help. Some elements do things on their own, outside React: a <video> or <audio> keeps playing, and an <iframe> keeps running its page. Unmounting removed them, which stopped them. Activity keeps them, so a hidden video would keep playing. Give it an effect whose cleanup pauses it:

function VideoTab() {
  const videoRef = useRef(null);

  useLayoutEffect(() => {
    const video = videoRef.current;
    return () => video.pause();
  }, []);

  return <video ref={videoRef} src="/tea-ceremony.mp4" controls />;
}

This fragment needs a video file, so it doesn't run here. Lines 4 to 7 are a layout effect whose cleanup, on line 6, pauses the video. Hiding runs that cleanup at once, and the video keeps its place, because the element stays. react.dev suggests a layout effect here because the pause belongs with the moment the tab disappears. Exercise 5 has a runnable case of the same problem.

Render a tab before anyone opens it

A boundary can be hidden from the very first render. Then React still renders its children, at a lower priority than the visible page, and without running their effects. That's pre-rendering: anything the tab needs while rendering, like data read with use or a component's code, starts loading before the reader asks. The orders below come from a pretend server in the data.js tab, which answers after one second. Press Run again, wait a moment, then open Orders:

1import { Activity, Suspense, useState } from "react";2import Orders from "./Orders.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("profile");7  return (8    <>9      <nav>10        <button onClick={() => setTab("profile")}>Profile</button>11        <button onClick={() => setTab("orders")}>Orders</button>12      </nav>13      <Activity mode={tab === "profile" ? "visible" : "hidden"}>14        <Profile />15      </Activity>16      <Activity mode={tab === "orders" ? "visible" : "hidden"}>17        <Suspense fallback={<p>Loading orders…</p>}>18          <Orders />19        </Suspense>20      </Activity>21    </>22  );23}

The orders appear at once. Line 6 opens on Profile, so the boundary on lines 16 to 20 starts hidden. React renders Orders anyway, which calls use(fetchData("/orders")) on line 5 of its tab, so the console prints Load /orders as the page opens. The Suspense boundary on lines 17 to 19 waits for the data out of sight. By the time you click, the orders are ready. Click within the first second and you'll see Loading orders… for what's left of it.

Compare it with the same tabs and conditional rendering:

1import { Suspense, useState } from "react";2import Orders from "./Orders.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("profile");7  return (8    <>9      <nav>10        <button onClick={() => setTab("profile")}>Profile</button>11        <button onClick={() => setTab("orders")}>Orders</button>12      </nav>13      {tab === "profile" && <Profile />}14      {tab === "orders" && (15        <Suspense fallback={<p>Loading orders…</p>}>16          <Orders />17        </Suspense>18      )}19    </>20  );21}

Nothing loads until you click. Then line 14 mounts the boundary, Orders asks for the data, and you wait a full second behind Loading orders….

Pre-rendering only loads what's read while rendering. A request in an effect, like the ones in Fetching data, waits until the tab is shown, because hidden content runs no effects. That's one more reason the Suspense way of reading data, through a cache, works well with Activity.

Activity, conditional rendering, or display: none

You could also hide a tab with CSS, by giving its wrapper display: none, the way the Styles and classes lesson does in plain JavaScript. That keeps the component mounted too, so how is it different? Here are three stopwatches, one for each way. Let them run for a few seconds, then hide all three, wait, and show them:

1import { Activity, useEffect, useState } from "react";2 3function Stopwatch({ name }) {4  const [seconds, setSeconds] = useState(0);5  useEffect(() => {6    const id = setInterval(() => setSeconds((s) => s + 1), 1000);7    return () => clearInterval(id);8  }, []);9  return <p>{name}: {seconds} s</p>;10}11 12export default function ThreeWays() {13  const [show, setShow] = useState(true);14  return (15    <>16      <button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"} all three</button>17      {show && <Stopwatch name="Conditional" />}18      <div style={{ display: show ? "block" : "none" }}>19        <Stopwatch name="CSS display: none" />20      </div>21      <Activity mode={show ? "visible" : "hidden"}>22        <Stopwatch name="Activity" />23      </Activity>24    </>25  );26}

Lines 3 to 10 are the stopwatch: an effect that adds one second every second, with a cleanup that stops it. After you show them again:

• Conditional (line 17) starts from 0. It was unmounted, and its state with it.
• CSS display: none (lines 18 to 20) counted the whole time. It was only out of sight; its effect never stopped. Every timer, connection, and subscription in a tab hidden this way keeps running, and every update renders at full speed.
• Activity (lines 21 to 23) shows the number it had when you hid it, then goes on. Its state stayed; its effect stopped and started again.

In the playground, the chat from the effects section, without its render log, is hidden each of the three ways. Choose a way, wait a few seconds, type a draft, then hide the chat, wait, and show it. Watch the counter, the draft, and the console.

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3 4export default function SupportApp() {5  const [visible, setVisible] = useState(true);6  return (7    <>8      <button onClick={() => setVisible(!visible)}>{visible ? "Hide" : "Show"} the chat</button>9      <Activity mode={visible ? "visible" : "hidden"}>10        <Chat room="#general" />11      </Activity>12    </>13  );14}

How to read the table: each row is one question, answered for each way of hiding.

Hidden content isn't free: it keeps its memory, and it re-renders when its props change. Keep hidden what the reader is likely to come back to, or open next, and unmount the rest.

A support app with tabs that remember

Here is everything together. Each tab is hidden in the way that suits it, and the chat and orders tabs are the same files as above:

1import { Activity, Suspense, useState } from "react";2import Chat from "./Chat.jsx";3import Orders from "./Orders.jsx";4import Profile from "./Profile.jsx";5 6const tabs = [7  { id: "chat", label: "Chat" },8  { id: "orders", label: "Orders" },9  { id: "profile", label: "Profile" },10];11 12export default function SupportApp() {13  const [tab, setTab] = useState("chat");14  return (15    <>16      <nav>17        {tabs.map(({ id, label }) => (18          <button key={id} onClick={() => setTab(id)} aria-pressed={tab === id}>19            {label}20          </button>21        ))}22      </nav>23      <Activity mode={tab === "chat" ? "visible" : "hidden"}>24        <Chat room="#general" />25      </Activity>26      <Activity mode={tab === "orders" ? "visible" : "hidden"}>27        <Suspense fallback={<p>Loading orders…</p>}>28          <Orders />29        </Suspense>30      </Activity>31      {tab === "profile" && <Profile />}32    </>33  );34}

Lines 6 to 10 list the tabs, and lines 17 to 21 make a button for each, with aria-pressed telling screen readers which one is open. The chat on lines 23 to 25 keeps its draft and disconnects while hidden. The orders on lines 26 to 30 start hidden, so they pre-render and load as the app opens. Profile, on line 31, has nothing to keep and nothing to load, so plain conditional rendering is enough.

Write a draft, open Orders (already loaded), then Profile, then Chat: the draft is there, and the console shows Disconnect from #general when you left the chat and Connect to #general when you came back, with StrictMode's extra pair in development.

Common mix-ups

• "Hidden means unmounted." No. A hidden Activity keeps its components mounted, with their state and DOM. Only their effects are cleaned up.
• "Activity is the same as display: none." No. CSS only hides the elements, and every effect keeps running. Activity also stops the effects and lowers the priority of hidden renders.
• "A hidden tab doesn't render at all." No. It renders when its props change, and on its first render if it starts hidden, at a lower priority than what's on screen.
• "Pre-rendering loads data from effects too." No. Hidden content runs no effects, so only data read while rendering, like use with a cached promise, starts loading early.
• "Activity stops everything the tab does." No. It stops effects. A timer you start in a click handler, or a <video> that's playing, keeps going unless an effect's cleanup stops it.
• "Keeping every tab hidden is always better." No. Hidden content takes memory and still re-renders. Unmount what the reader won't come back to, and anything that should start fresh.
• "The extra Disconnect and Connect mean my code is wrong." No. StrictMode adds them in development to check your cleanup. In production, each runs once.

Practice exercises

The exercises use the same support app and the same pretend server. Change the code with Edit & run, and press Run again to start over.

import { useState } from "react";
import Chat from "./Chat.jsx";
import Profile from "./Profile.jsx";

export default function SupportApp() {
  const [tab, setTab] = useState("chat");
  return (
    <>
      <nav>
        <button onClick={() => setTab("chat")}>Chat</button>
        <button onClick={() => setTab("profile")}>Profile</button>
      </nav>
      {tab === "chat" && <Chat />}
      {tab === "profile" && <Profile />}
    </>
  );
}

1import { useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  return (8    <>9      <nav>10        <button onClick={() => setTab("chat")}>Chat</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      {tab === "chat" && <Chat />}14      {tab === "profile" && <Profile />}15    </>16  );17}

1import { useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  return (8    <>9      <nav>10        <button onClick={() => setTab("chat")}>Chat</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      {tab === "chat" && <Chat />}14      {tab === "profile" && <Profile />}15    </>16  );17}

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  return (8    <>9      <nav>10        <button onClick={() => setTab("chat")}>Chat</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      <Activity mode={tab === "chat" ? "visible" : "hidden"}>14        <Chat />15      </Activity>16      <Activity mode={tab === "profile" ? "visible" : "hidden"}>17        <Profile />18      </Activity>19    </>20  );21}

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  const [room, setRoom] = useState("#general");8  return (9    <>10      <nav>11        <button onClick={() => setTab("chat")}>Chat</button>12        <button onClick={() => setTab("profile")}>Profile</button>13        <button onClick={() => setRoom("#orders")}>Move to #orders</button>14      </nav>15      <Activity mode={tab === "chat" ? "visible" : "hidden"}>16        <Chat room={room} />17      </Activity>18      <Activity mode={tab === "profile" ? "visible" : "hidden"}>19        <Profile />20      </Activity>21    </>22  );23}

1import { Activity, useState } from "react";2import Chat from "./Chat.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("chat");7  const [room, setRoom] = useState("#general");8  return (9    <>10      <nav>11        <button onClick={() => setTab("chat")}>Chat</button>12        <button onClick={() => setTab("profile")}>Profile</button>13        <button onClick={() => setRoom("#orders")}>Move to #orders</button>14      </nav>15      <Activity mode={tab === "chat" ? "visible" : "hidden"}>16        <Chat room={room} />17      </Activity>18      <Activity mode={tab === "profile" ? "visible" : "hidden"}>19        <Profile />20      </Activity>21    </>22  );23}

1import { Suspense, useState } from "react";2import Orders from "./Orders.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("profile");7  return (8    <>9      <nav>10        <button onClick={() => setTab("profile")}>Profile</button>11        <button onClick={() => setTab("orders")}>Orders</button>12      </nav>13      {tab === "profile" && <Profile />}14      {tab === "orders" && (15        <Suspense fallback={<p>Loading orders…</p>}>16          <Orders />17        </Suspense>18      )}19    </>20  );21}

1import { Activity, Suspense, useState } from "react";2import Orders from "./Orders.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("profile");7  return (8    <>9      <nav>10        <button onClick={() => setTab("profile")}>Profile</button>11        <button onClick={() => setTab("orders")}>Orders</button>12      </nav>13      <Activity mode={tab === "profile" ? "visible" : "hidden"}>14        <Profile />15      </Activity>16      <Activity mode={tab === "orders" ? "visible" : "hidden"}>17        <Suspense fallback={<p>Loading orders…</p>}>18          <Orders />19        </Suspense>20      </Activity>21    </>22  );23}

1import { Activity, useState } from "react";2import Radio from "./Radio.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("radio");7  return (8    <>9      <nav>10        <button onClick={() => setTab("radio")}>Radio</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      <Activity mode={tab === "radio" ? "visible" : "hidden"}>14        <Radio />15      </Activity>16      <Activity mode={tab === "profile" ? "visible" : "hidden"}>17        <Profile />18      </Activity>19    </>20  );21}

1import { Activity, useState } from "react";2import Radio from "./Radio.jsx";3import Profile from "./Profile.jsx";4 5export default function SupportApp() {6  const [tab, setTab] = useState("radio");7  return (8    <>9      <nav>10        <button onClick={() => setTab("radio")}>Radio</button>11        <button onClick={() => setTab("profile")}>Profile</button>12      </nav>13      <Activity mode={tab === "radio" ? "visible" : "hidden"}>14        <Radio />15      </Activity>16      <Activity mode={tab === "profile" ? "visible" : "hidden"}>17        <Profile />18      </Activity>19    </>20  );21}

1import { Activity, useState } from "react";2import CheckoutForm from "./CheckoutForm.jsx";3 4export default function Cart() {5  const [open, setOpen] = useState(false);6  return (7    <>8      <button onClick={() => setOpen(true)}>Check out</button>9      <Activity mode={open ? "visible" : "hidden"}>10        <CheckoutForm onClose={() => setOpen(false)} />11      </Activity>12    </>13  );14}

1import { useState } from "react";2import CheckoutForm from "./CheckoutForm.jsx";3 4export default function Cart() {5  const [open, setOpen] = useState(false);6  return (7    <>8      <button onClick={() => setOpen(true)}>Check out</button>9      {open && <CheckoutForm onClose={() => setOpen(false)} />}10    </>11  );12}

Check your understanding

For each question, ask what the hidden part keeps (state, DOM) and what stops (effects).

Key takeaways

• <Activity mode="visible"> shows its children; mode="hidden" hides them without unmounting. It's stable since React 19.2.
• Hidden children keep their state and their DOM, so drafts, open sections, and scroll positions survive. React hides the DOM with display: none !important.
• Hiding cleans up their effects; showing runs them again. Things started outside effects need a cleanup of their own.
• Hidden children still re-render when their props change, at a lower priority than what's on screen.
• A boundary that starts hidden pre-renders its children, so data read with use starts loading before the click.
• Use conditional rendering for what should start fresh, CSS for pure styling, and Activity for what the reader will come back to.

Coming next: View transitions. It animates between screens and states, with React's ViewTransition and the browser's View Transition API.