From 7a8454fc3520b9662bf51ae5797f4977f0cf884c Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Thu, 17 Jul 2025 18:29:25 -0400
Subject: [PATCH 01/15] Updates to Activity docs

---
 src/content/reference/react/Activity.md | 1472 ++++++++++++-----------
 1 file changed, 787 insertions(+), 685 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 8b103938e50..310ab264040 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -19,11 +19,11 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 <Intro>
 
-`<Activity>` lets you hide and show part of the UI.
+`<Activity>` lets you hide and show its children without resetting their state.
 
 
 ```js
-<Activity mode={mode}>
+<Activity mode="hidden">
   <Page />
 </Activity>
 ```
@@ -38,28 +38,14 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 ### `<Activity>` {/*activity*/}
 
-Wrap a part of the UI in `<Activity>` to manage its visibility state:
-
-```js
-import {unstable_Activity as Activity} from 'react';
-
-<Activity mode={isVisible ? 'visible' : 'hidden'}>
-  <Page />
-</Activity>
-```
-
-When "hidden", the `children` of `<Activity />` are not visible on the page. If a new `<Activity>` mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity.
-
-In the future, "hidden" Activities may automatically destroy state based on resources like memory.
-
 #### Props {/*props*/}
 
-* `children`: The actual UI you intend to render.
+* `children`: The UI you intend to show and hide.
 * **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed. 
 
 #### Caveats {/*caveats*/}
 
-- While hidden, the `children` of `<Activity>` are hidden on the page. 
+- While hidden, the `children` of `<Activity>` are visually hidden on the page. 
 - `<Activity>` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
 - When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
 - Parts of the UI wrapped in `<Activity mode="hidden">` are not included in the SSR response.
@@ -69,184 +55,554 @@ In the future, "hidden" Activities may automatically destroy state based on reso
 
 ## Usage {/*usage*/}
 
-### Pre-render part of the UI {/*pre-render-part-of-the-ui*/}
+### Hiding content without resetting React state {/*hiding-content-without-resetting-react-state*/}
 
-You can pre-render part of the UI using `<Activity mode="hidden">`:
+You can use Activity to hide part of your application without resetting its local React state:
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
-When an Activity is rendered with `mode="hidden"`, the `children` are not visible on the page, but are rendered at lower priority than the visible content on the page. 
+When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will _visually_ hide its <CodeStep step={2}>children</CodeStep> without destroying any of its local component state.
 
-When the `mode` later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times.
+If the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the content with the same state values from before it was hidden.
 
-In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab` component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab` component suspends, causing the button loading state to appear:
+---
+
+The following example has a sidebar with an expandable section – press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
+
+Try expanding the Overview section, hiding the sidebar, and then showing the sidebar again:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js active
+import { useState } from 'react';
+import Sidebar from './Sidebar.js';
+
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
+
+  return (
+    <>
+      {isShowingSidebar && (
+        <Sidebar />
+      )}
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
+  );
+}
+```
+
+```js src/Sidebar.js
+import { useState } from 'react';
+
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
+  );
+}
+```
+
+```css
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+The Overview section starts out collapsed again! Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
+
+This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
+
+Let's replace the conditional rendering of our sidebar with an Activity boundary:
+
+```jsx {7,9}
+// Before
+{isShowingSidebar && (
+  <Sidebar />
+)}
+
+// After
+<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+  <Sidebar />
+</Activity>
+```
+
+and check out the new behavior:
+
+<Sandpack>
+
+```js src/App.js active
+import { unstable_Activity as Activity, useState } from 'react';
+import Sidebar from './Sidebar.js';
+
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
+
+  return (
+    <>
+      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+        <Sidebar />
+      </Activity>
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
+  );
+}
+```
+
+```js src/Sidebar.js
+import { useState } from 'react';
+
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
+  );
+}
+```
+
+```css
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Our sidebar's internal state is now preserved, and we didn't have to change anything about its implementation.
+
+---
+
+### Hiding content without resetting the DOM {/*hiding-content-without-resetting-the-dom*/}
+
+Activity boundaries also preserve their children's DOM when hidden, making them great for preserving ephemeral state in parts of the UI the user is likely to interact with again.
+
+In this example, the Contact tab has a `<textarea>` that lets the user enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
+
+<Sandpack>
+
+```js src/App.js 
+import { useState } from 'react';
 import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
+import HomeTab from './HomeTab.js';
 import ContactTab from './ContactTab.js';
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
+    <>
       <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
       >
-        Posts
+        Home
       </TabButton>
       <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
       >
         Contact
       </TabButton>
+
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+
+      {activeTab === 'home' && <HomeTab />}
+      {activeTab === 'contact' && <ContactTab />}
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```js src/HomeTab.js
+export default function HomeTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
-export default function AboutTab() {
+```js src/ContactTab.js active
+export default function ContactTab() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <div>
+      <p>Send me a message!</p>
+
+      <textarea />
+
+      <p>You can find me online here:</p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </div>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+This is because we're fully unmounting the `<ContactTab>` in `App.js`. When the Contact tab unmounts, the `<textarea>` element's internal state is lost.
+
+If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import HomeTab from './HomeTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
+      >
+        Contact
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <HomeTab />
+      </Activity>
+      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
+        <ContactTab />
+      </Activity>
+    </>
   );
 }
+```
+
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-function Post({ title }) {
   return (
-    <li className="item">
-      {title}
-    </li>
+    <button onClick={onClick}>
+      {children}
+    </button>
   );
 }
-
-export default PostsTab;
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```js src/HomeTab.js
+export default function HomeTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
+```js src/ContactTab.js 
 export default function ContactTab() {
   return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
+    <div>
+      <p>Send me a message!</p>
+
       <textarea />
-      <p>
-        You can find me online here:
-      </p>
+
+      <p>You can find me online here:</p>
       <ul>
         <li>admin@mysite.com</li>
         <li>+123456789</li>
       </ul>
-    </ViewTransition>
+    </div>
   );
 }
 ```
 
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
 
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
 
-let cache = new Map();
+</Sandpack>
 
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
+Again, the Activity boundary let us preserve the Contact tab's internal state without changing its implementation.
+
+---
+
+### Preventing hidden content from having unwanted side effects {/*preventing-hidden-content-from-having-unwanted-side-effects*/}
+
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their [Effects](/reference/react/useEffect). So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
+
+But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+
+As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import HomeTab from './HomeTab.js';
+import VideoTab from './VideoTab.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      {activeTab === 'home' && <HomeTab />}
+      {activeTab === 'video' && <VideoTab />}
+    </>
+  );
 }
+```
 
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
 }
+```
 
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
+```js src/HomeTab.js
+export default function HomeTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/VideoTab.js 
+export default function VideoTab() {
+  return (
+    <video
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
+    />
+
+  );
 }
 ```
 
@@ -255,6 +611,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -276,169 +633,231 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab.
+The video stops playing as expected.
+
+Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
 
-We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden `<Activity>`: 
+This is a great use case for Activity!
+
+Let's update our `App.js` component to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import HomeTab from './HomeTab.js';
+import VideoTab from './VideoTab.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
-      </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
-        Posts
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
       </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <HomeTab />
       </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <VideoTab />
       </Activity>
-    </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/HomeTab.js
+export default function HomeTab() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
-
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
+```js src/VideoTab.js 
+export default function VideoTab() {
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
+    <video
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
 
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
   );
 }
+```
 
-export default PostsTab;
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Whoops! The video and audio continues to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
+
+To fix this, we can add an Effect with a cleanup function that pauses the video:
+
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
+
+  useEffect(() => {
+    const videoRef = ref.current;
+
+    return () => {
+      videoRef.pause()
+    }
+  }, []);
 
-export default function ContactTab() {
   return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
   );
 }
 ```
 
+Let's see the new behavior:
 
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+<Sandpack>
 
-let cache = new Map();
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import HomeTab from './HomeTab.js';
+import VideoTab from './VideoTab.js';
 
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
+export default function App() {
+  const [activeTab, setActiveTab] = useState('video');
+
+  return (
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <HomeTab />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <VideoTab />
+      </Activity>
+    </>
+  );
 }
+```
 
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
+
+```js src/HomeTab.js
+export default function HomeTab() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
 }
+```
 
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
+```js src/VideoTab.js 
+import { useRef, useEffect } from 'react';
+
+export default function VideoTab() {
+  const ref = useRef();
+
+  useEffect(() => {
+    const videoRef = ref.current
+
+    return () => {
+      videoRef.pause()
+    };
+  }, [])
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
 }
 ```
 
@@ -447,6 +866,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -468,153 +888,124 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+It's working great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
+
+This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
+
 ---
 
-### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/}
+Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
 
+The most common cases of this will be from the following tags:
 
-You can keep state for parts of the UI by switching `<Activity>` from "visible" to "hidden":
+  - `<video>`
+  - `<audio>`
+  - `<iframe>`
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
+
+To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
+
+---
+
+### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
+
+So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
+
+But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
+
+```jsx [[1, 1, "\\"hidden\\""]]
+<Activity mode="hidden">
+  <SlowComponent />
 </Activity>
 ```
 
-When an Activity switches from `mode="visible"` to "hidden", the `children` will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state.
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
 
-When the `mode` later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state.
+This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can be mounted and appear instantly.
 
-In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `<textarea>` with a draft message to send. If you enter some text and change to a different tab, then when you click the “Contact” tab again, the draft message is lost:
+Let's look at an example.
 
+In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js
+import { useState, Suspense } from 'react';
 import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('contact');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
+    <>
       <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
       >
-        About
+        Home
       </TabButton>
       <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
       >
         Posts
       </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
-      >
-        Contact
-      </TabButton>
+
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
 import { fetchData } from './data.js';
 
-function PostsTab() {
+export default function Posts() {
   const posts = use(fetchData('/posts'));
+
   return (
-    <ViewTransition>
     <ul className="items">
       {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
       )}
     </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
   );
 }
 ```
 
-
 ```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
@@ -658,6 +1049,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -679,133 +1071,94 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-This results in losing DOM state the user has input. We can keep the state for the Contact tab by hiding the inactive Tabs with `<Activity>`:
+This is because the `App` component doesn't render `Posts` until its tab is active.
+
+If we update the `App` component to use an Activity boundary to show and hide the active tab, the `Posts` component will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
 
+Try clicking the Posts tab now:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js
+import { useState, Suspense, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
         Posts
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+          <Home />
+        </Activity>
+        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
+          <Posts />
+        </Activity>
+      </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
 import { fetchData } from './data.js';
 
-function PostsTab() {
+export default function Posts() {
   const posts = use(fetchData('/posts'));
+
   return (
-    <ViewTransition>
     <ul className="items">
       {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
       )}
     </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
   );
 }
 ```
 
-
 ```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
@@ -849,6 +1202,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -870,291 +1224,39 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
----
-
-## Troubleshooting {/*troubleshooting*/}
-
-### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
-
-When an `<Activity>` is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later. 
-
-This is a feature of Activity because it means subscriptions won't be subscribed for hidden parts of the UI, reducing the amount of work for hidden content. It also means cleanup, such as pausing a video (which would be expected if you unmounted without Activity) will fire. When an Activity switches to "visible", it will mount by creating the Effects, which will subscribe and play the video.
-
-Consider the following example, where a different video is played for each button:
-
-
-<Sandpack>
-
-```js
-import { useState, useRef, useEffect } from 'react';
-import './checker.js';
-
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
-
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
-
-export default function App() {
-  const [video, setVideo] = useState(1);
-  return (
-    <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      {video === 1 &&
-        <VideoPlayer key={1}
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
-
-      }
-      {video === 2 && 
-        <VideoPlayer key={2}
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
-      }
-    </>
-  );
-}
-```
-
-```js src/checker.js hidden
-let interval = setInterval(() => {
-  const videos = Array.from(document.querySelectorAll('video'));
-  const playing = videos.filter(
-    (v) => !v.paused
-  );
-  if (playing.length > 1) {
-    console.error(`Multiple playing videos: ${playing.length}`);
-  }
-    
-}, 50);
-```
-
-
-```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
-```
-
-</Sandpack>
-
-
-Whenever you change videos and come back, the video re-loads from the beginning. To maintain the state, you may try to render both videos, and hide the inactive video in `display: none`. However, this will cause both videos to play at the same time:
-
-
-<Sandpack>
-
-```js
-import { useState, useRef, useEffect } from 'react';
-import VideoChecker from './checker.js';
-
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
-
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
-
-export default function App() {
-  const [video, setVideo] = useState(1);
-  return (
-    <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      <div style={{display: video === 1 ? 'block' : 'none'}}>
-        <VideoPlayer
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
-
-      </div>
-      <div style={{display: video === 2 ? 'block' : 'none'}}>
-        <VideoPlayer
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
-      </div>
-      <VideoChecker />
-    </>
-  );
-}
-```
-
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
-
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
-
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
-
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
-
-    }, 50);
-    
-    return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
-    }
-  });
-  
-}
-
-```
-
-
-```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
-```
-
-</Sandpack>
-
-This is similar to what would happen if Activity mounted Effects when hidden. Similarly, if Activity didn't unmount Effects when hiding, the videos would continue to play in the background.
-
-Activity solves this by not creating Effects when first rendered as "hidden" and destroying all Effects when switching from "visible" to "hidden":
+`Posts` was able to prepare itself for an instant render, thanks to the hidden Activity boundary.
 
+---
 
-<Sandpack>
+Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
 
-```js
-import { useState, useRef, useEffect, unstable_Activity as Activity } from 'react';
-import VideoChecker from './checker.js';
+<Note>
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
 
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
+Activity **does not** detect data that is fetched inside an Effect.
 
-export default function App() {
-  const [video, setVideo] = useState(1);
-  return (
-    <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      <Activity mode={video === 1 ? 'visible' : 'hidden'}>
-        <VideoPlayer
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
-      </Activity>
-      <Activity mode={video === 2 ? 'visible' : 'hidden'}>
-        <VideoPlayer
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
-      </Activity>
-      <VideoChecker />
-    </>
-  );
-}
-```
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+</Note>
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
-
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
-
-    }, 50);
-    
-    return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
-    }
-  });
-  
-}
+---
 
-```
+## Troubleshooting {/*troubleshooting*/}
 
-```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
-```
+### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
 
-```json package.json hidden
-{
-  "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental",
-    "react-scripts": "latest",
-    "toastify-js": "1.12.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
-```
+When an `<Activity>` is "hidden", all Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
 
-</Sandpack>
+If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
 
-For this reason, it's best to think of Activity conceptually as "unmounting" and "remounting" the component, but saving the React or DOM state for later. In practice, this works as expected if you have followed the [You Might Not Need an Effect](learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
+To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
 
 ### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
 

From b8eb2b1def8e46093618d40c50340e162f00936c Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Fri, 18 Jul 2025 19:47:11 -0400
Subject: [PATCH 02/15] wip

---
 src/content/reference/react/Activity.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 310ab264040..96dea05f858 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -73,7 +73,7 @@ If the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will
 
 The following example has a sidebar with an expandable section – press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
-Try expanding the Overview section, hiding the sidebar, and then showing the sidebar again:
+Try expanding the Overview section, then toggling the sidebar closed then open:
 
 <Sandpack>
 
@@ -179,7 +179,7 @@ h1 {
 
 </Sandpack>
 
-The Overview section starts out collapsed again! Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
+The Overview section resets, and starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
 This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 

From 599d1721f548ec26cccebbccd10c500c64788d8e Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Mon, 21 Jul 2025 12:00:02 -0400
Subject: [PATCH 03/15] Updates to Activity docs:

- New intro at top of Reference
- Adds "Deferring hydration of low-priority content" section
- Move "Preventing hidden content from having unwanted side effects" section to Troubleshooting
- Removes SSR section from Troubleshooting
---
 src/content/reference/react/Activity.md | 661 +++++++++++++-----------
 1 file changed, 352 insertions(+), 309 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 96dea05f858..1e95e7ce795 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -19,12 +19,11 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 <Intro>
 
-`<Activity>` lets you hide and show its children without resetting their state.
-
+`<Activity>` lets you hide and restore the UI and internal state of its children.
 
 ```js
-<Activity mode="hidden">
-  <Page />
+<Activity mode={visibility}>
+  <Sidebar />
 </Activity>
 ```
 
@@ -38,6 +37,24 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 ### `<Activity>` {/*activity*/}
 
+You can use Activity to hide part of your application:
+
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
+</Activity>
+```
+
+When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will visually hide its <CodeStep step={2}>children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
+
+While hidden, children still receive updates, albeit at a lower priority then the rest of the content.
+
+When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and create their Effects.
+
+In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than unmounting content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state.
+
+[See more examples below.](#usage)
+
 #### Props {/*props*/}
 
 * `children`: The UI you intend to show and hide.
@@ -48,30 +65,35 @@ Experimental versions of React may contain bugs. Don't use them in production.
 - While hidden, the `children` of `<Activity>` are visually hidden on the page. 
 - `<Activity>` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
 - When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
-- Parts of the UI wrapped in `<Activity mode="hidden">` are not included in the SSR response.
 - Parts of the UI wrapped in `<Activity mode="visible">` will hydrate at a lower priority than other content.
 
 ---
 
 ## Usage {/*usage*/}
 
-### Hiding content without resetting React state {/*hiding-content-without-resetting-react-state*/}
+### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-You can use Activity to hide part of your application without resetting its local React state:
+Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
 
-```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
-<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+```jsx
+{isShowingSidebar && (
   <Sidebar />
-</Activity>
+)}
 ```
 
-When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will _visually_ hide its <CodeStep step={2}>children</CodeStep> without destroying any of its local component state.
+But unmounting a component destroys its internal state, which is not always what you want.
 
-If the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the content with the same state values from before it was hidden.
+When you hide a component using an Activity boundary instead, React will "save" its state for later:
 
----
+```jsx
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
+</Activity>
+```
+
+This makes it possible to restore components to their previous state.
 
-The following example has a sidebar with an expandable section – press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
+The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
 Try expanding the Overview section, then toggling the sidebar closed then open:
 
@@ -179,7 +201,7 @@ h1 {
 
 </Sandpack>
 
-The Overview section resets, and starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
+The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
 This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 
@@ -303,15 +325,15 @@ h1 {
 
 </Sandpack>
 
-Our sidebar's internal state is now preserved, and we didn't have to change anything about its implementation.
+Our sidebar's internal state is now restored, without any changes to its implementation.
 
 ---
 
-### Hiding content without resetting the DOM {/*hiding-content-without-resetting-the-dom*/}
+### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/}
 
-Activity boundaries also preserve their children's DOM when hidden, making them great for preserving ephemeral state in parts of the UI the user is likely to interact with again.
+Since Activity boundaries hide their children using `display: none`, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again.
 
-In this example, the Contact tab has a `<textarea>` that lets the user enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
+In this example, the Contact tab has a `<textarea>` where the user can enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
 
 <Sandpack>
 
@@ -414,7 +436,7 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-This is because we're fully unmounting the `<ContactTab>` in `App.js`. When the Contact tab unmounts, the `<textarea>` element's internal state is lost.
+This is because we're fully unmounting `ContactTab` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
 
 If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
 
@@ -527,24 +549,36 @@ Again, the Activity boundary let us preserve the Contact tab's internal state wi
 
 ---
 
-### Preventing hidden content from having unwanted side effects {/*preventing-hidden-content-from-having-unwanted-side-effects*/}
+### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
 
-An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their [Effects](/reference/react/useEffect). So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
+So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
 
-But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
 
-As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
+```jsx [[1, 1, "\\"hidden\\""]]
+<Activity mode="hidden">
+  <SlowComponent />
+</Activity>
+```
+
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
+
+This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.
+
+Let's look at an example.
+
+In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
 
 <Sandpack>
 
-```js src/App.js active
-import { useState } from 'react';
+```js src/App.js
+import { useState, Suspense } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import VideoTab from './VideoTab.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState('video');
+  const [activeTab, setActiveTab] = useState('home');
 
   return (
     <>
@@ -555,16 +589,18 @@ export default function App() {
         Home
       </TabButton>
       <TabButton
-        isActive={activeTab === 'video'}
-        onClick={() => setActiveTab('video')}
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
       >
-        Video
+        Posts
       </TabButton>
 
       <hr />
 
-      {activeTab === 'home' && <HomeTab />}
-      {activeTab === 'video' && <VideoTab />}
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
     </>
   );
 }
@@ -584,28 +620,71 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/VideoTab.js 
-export default function VideoTab() {
-  return (
-    <video
-      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
-      controls
-      playsInline
-    />
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
 
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
+      )}
+    </ul>
   );
 }
 ```
 
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/posts')) {
+    return await getPosts();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getPosts() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+  let posts = [];
+  for (let i = 0; i < 10; i++) {
+    posts.push({
+      id: i,
+      title: 'Post #' + (i + 1)
+    });
+  }
+  return posts;
+}
+```
+
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
@@ -633,24 +712,22 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-The video stops playing as expected.
-
-Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
+This is because `App` doesn't mount `Posts` until its tab is active.
 
-This is a great use case for Activity!
+If we update `App` to use an Activity boundary to show and hide the active tab, `Posts` will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
 
-Let's update our `App.js` component to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
+Try clicking the Posts tab now:
 
 <Sandpack>
 
-```js src/App.js active
-import { useState, unstable_Activity as Activity } from 'react';
+```js src/App.js
+import { useState, Suspense, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import VideoTab from './VideoTab.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState('video');
+  const [activeTab, setActiveTab] = useState('home');
 
   return (
     <>
@@ -661,20 +738,22 @@ export default function App() {
         Home
       </TabButton>
       <TabButton
-        isActive={activeTab === 'video'}
-        onClick={() => setActiveTab('video')}
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
       >
-        Video
+        Posts
       </TabButton>
 
       <hr />
 
-      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-        <HomeTab />
-      </Activity>
-      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
-        <VideoTab />
-      </Activity>
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+          <Home />
+        </Activity>
+        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
+          <Posts />
+        </Activity>
+      </Suspense>
     </>
   );
 }
@@ -694,28 +773,71 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/VideoTab.js 
-export default function VideoTab() {
-  return (
-    <video
-      controls
-      playsInline
-      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
-    />
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
 
+  return (
+    <ul className="items">
+      {posts.map(post =>
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
+      )}
+    </ul>
   );
 }
 ```
 
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+  if (!cache.has(url)) {
+    cache.set(url, getData(url));
+  }
+  return cache.get(url);
+}
+
+async function getData(url) {
+  if (url.startsWith('/posts')) {
+    return await getPosts();
+  } else {
+    throw Error('Not implemented');
+  }
+}
+
+async function getPosts() {
+  // Add a fake delay to make waiting noticeable.
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+  let posts = [];
+  for (let i = 0; i < 10; i++) {
+    posts.push({
+      id: i,
+      title: 'Post #' + (i + 1)
+    });
+  }
+  return posts;
+}
+```
+
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
@@ -743,40 +865,68 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-Whoops! The video and audio continues to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
+`Posts` was able to prepare itself for a faster render, thanks to the hidden Activity boundary.
 
-To fix this, we can add an Effect with a cleanup function that pauses the video:
+---
 
-```jsx {2,4-10,14}
-export default function VideoTab() {
-  const ref = useRef();
+Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
 
-  useEffect(() => {
-    const videoRef = ref.current;
+<Note>
 
-    return () => {
-      videoRef.pause()
-    }
-  }, []);
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
 
-  return (
-    <video
-      ref={ref}
-      controls
-      playsInline
-      src="..."
-    />
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
 
-  );
+Activity **does not** detect data that is fetched inside an Effect.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+
+</Note>
+
+---
+
+### Deferring hydration of low-priority content {/*deferring-hydration-of-low-priority-content*/}
+
+You can wrap part of your UI in a <CodeStep step={1}>visible</CodeStep> Activity boundary to defer mounting it on the initial render:
+
+```jsx [[1,6,"\\"visible\\""]]
+function Page() {
+  return (
+    <>
+      <Post />
+    
+      <Activity mode="visible">
+        <Comments />
+      </Activity>
+    </>
+  )
 }
 ```
 
-Let's see the new behavior:
+During hydration, React will leave the visible Activity boundary unmounted while hydrating the rest of the page, improving the performance of higher-priority content. Once the rest of the page has fetched its code and data and been rendered, React will move on to mount any remaining visible Activity boundaries.
+
+This feature is called Selective Hydration, and it's an under-the-hood optimization of React that's integrated with Suspense. You can read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Preventing hidden content from having unwanted side effects {/*preventing-hidden-content-from-having-unwanted-side-effects*/}
+
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their [Effects](/reference/react/useEffect). So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
+
+But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+
+As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
 
 <Sandpack>
 
 ```js src/App.js active
-import { useState, unstable_Activity as Activity } from 'react';
+import { useState } from 'react';
 import TabButton from './TabButton.js';
 import HomeTab from './HomeTab.js';
 import VideoTab from './VideoTab.js';
@@ -801,12 +951,8 @@ export default function App() {
 
       <hr />
 
-      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-        <HomeTab />
-      </Activity>
-      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
-        <VideoTab />
-      </Activity>
+      {activeTab === 'home' && <HomeTab />}
+      {activeTab === 'video' && <VideoTab />}
     </>
   );
 }
@@ -835,26 +981,13 @@ export default function HomeTab() {
 ```
 
 ```js src/VideoTab.js 
-import { useRef, useEffect } from 'react';
-
 export default function VideoTab() {
-  const ref = useRef();
-
-  useEffect(() => {
-    const videoRef = ref.current
-
-    return () => {
-      videoRef.pause()
-    };
-  }, [])
-
   return (
     <video
-      ref={ref}
-      controls
-      playsInline
       // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
       src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
     />
 
   );
@@ -888,56 +1021,24 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-It's working great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
-
-This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
-
----
-
-Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
-
-The most common cases of this will be from the following tags:
-
-  - `<video>`
-  - `<audio>`
-  - `<iframe>`
-
-Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
-
-To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
-
----
-
-### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
-
-So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
-
-But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
-
-```jsx [[1, 1, "\\"hidden\\""]]
-<Activity mode="hidden">
-  <SlowComponent />
-</Activity>
-```
-
-When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
+The video stops playing as expected.
 
-This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can be mounted and appear instantly.
+Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
 
-Let's look at an example.
+This is a great use case for Activity!
 
-In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
+Let's update `App` to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
 
 <Sandpack>
 
-```js src/App.js
-import { useState, Suspense } from 'react';
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import Home from './Home.js';
-import Posts from './Posts.js';
+import HomeTab from './HomeTab.js';
+import VideoTab from './VideoTab.js';
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState('home');
+  const [activeTab, setActiveTab] = useState('video');
 
   return (
     <>
@@ -948,18 +1049,20 @@ export default function App() {
         Home
       </TabButton>
       <TabButton
-        isActive={activeTab === 'posts'}
-        onClick={() => setActiveTab('posts')}
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
       >
-        Posts
+        Video
       </TabButton>
 
       <hr />
 
-      <Suspense fallback={<h1>🌀 Loading...</h1>}>
-        {activeTab === 'home' && <Home />}
-        {activeTab === 'posts' && <Posts />}
-      </Suspense>
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <HomeTab />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <VideoTab />
+      </Activity>
     </>
   );
 }
@@ -979,68 +1082,25 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/Home.js
-export default function Home() {
+```js src/HomeTab.js
+export default function HomeTab() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/Posts.js
-import { use } from 'react';
-import { fetchData } from './data.js';
-
-export default function Posts() {
-  const posts = use(fetchData('/posts'));
-
+```js src/VideoTab.js 
+export default function VideoTab() {
   return (
-    <ul className="items">
-      {posts.map(post =>
-        <li className="item" key={post.id}>
-          {post.title}
-        </li>
-      )}
-    </ul>
-  );
-}
-```
-
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
-
-let cache = new Map();
-
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
-
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
-  }
-}
+    <video
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
 
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
+  );
 }
 ```
 
@@ -1071,22 +1131,46 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-This is because the `App` component doesn't render `Posts` until its tab is active.
+Whoops! The video and audio continue to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
 
-If we update the `App` component to use an Activity boundary to show and hide the active tab, the `Posts` component will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
+To fix this, we can add an Effect with a cleanup function that pauses the video:
 
-Try clicking the Posts tab now:
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
+
+  useEffect(() => {
+    const videoRef = ref.current;
+
+    return () => {
+      videoRef.pause()
+    }
+  }, []);
+
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
+  );
+}
+```
+
+Let's see the new behavior:
 
 <Sandpack>
 
-```js src/App.js
-import { useState, Suspense, unstable_Activity as Activity } from 'react';
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import Home from './Home.js';
-import Posts from './Posts.js';
+import HomeTab from './HomeTab.js';
+import VideoTab from './VideoTab.js';
 
 export default function App() {
-  const [activeTab, setActiveTab] = useState('home');
+  const [activeTab, setActiveTab] = useState('video');
 
   return (
     <>
@@ -1097,22 +1181,20 @@ export default function App() {
         Home
       </TabButton>
       <TabButton
-        isActive={activeTab === 'posts'}
-        onClick={() => setActiveTab('posts')}
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
       >
-        Posts
+        Video
       </TabButton>
 
       <hr />
 
-      <Suspense fallback={<h1>🌀 Loading...</h1>}>
-        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-          <Home />
-        </Activity>
-        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
-          <Posts />
-        </Activity>
-      </Suspense>
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <HomeTab />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <VideoTab />
+      </Activity>
     </>
   );
 }
@@ -1132,68 +1214,38 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/Home.js
-export default function Home() {
+```js src/HomeTab.js
+export default function HomeTab() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/Posts.js
-import { use } from 'react';
-import { fetchData } from './data.js';
-
-export default function Posts() {
-  const posts = use(fetchData('/posts'));
-
-  return (
-    <ul className="items">
-      {posts.map(post =>
-        <li className="item" key={post.id}>
-          {post.title}
-        </li>
-      )}
-    </ul>
-  );
-}
-```
+```js src/VideoTab.js 
+import { useRef, useEffect } from 'react';
 
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+export default function VideoTab() {
+  const ref = useRef();
 
-let cache = new Map();
+  useEffect(() => {
+    const videoRef = ref.current
 
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
+    return () => {
+      videoRef.pause()
+    };
+  }, [])
 
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
-  }
-}
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
 
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
+  );
 }
 ```
 
@@ -1224,31 +1276,26 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-`Posts` was able to prepare itself for an instant render, thanks to the hidden Activity boundary.
-
----
-
-Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
+It's working great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
 
-<Note>
+This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
 
-**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
+---
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a cached Promise with [`use`](/reference/react/use)
+Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
 
-Activity **does not** detect data that is fetched inside an Effect.
+The most common cases of this will be from the following tags:
 
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+  - `<video>`
+  - `<audio>`
+  - `<iframe>`
 
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
+Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
 
-</Note>
+To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
 
 ### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
 
@@ -1256,8 +1303,4 @@ When an `<Activity>` is "hidden", all Effects are cleaned up. Conceptually, the
 
 If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
 
-To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
-
-### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
-
-When you use `<Activity mode="hidden">` during server-side rendering, the content of the Activity will not be included in the SSR response. This is because the content is not visible on the page and is not needed for the initial render. If you need to include the content in the SSR response, you can use a different approach like [`useDeferredValue`](/reference/react/useDeferredValue) to defer rendering of the content.
+To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
\ No newline at end of file

From 5041f2731d8c7664c545d102d04e604c22bb9e5a Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Mon, 21 Jul 2025 13:20:29 -0400
Subject: [PATCH 04/15] useLayoutEffect + Tidying up

---
 src/content/reference/react/Activity.md | 96 +++++++++++++------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 1e95e7ce795..3a365d8268e 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -340,8 +340,8 @@ In this example, the Contact tab has a `<textarea>` where the user can enter a m
 ```js src/App.js 
 import { useState } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('contact');
@@ -363,8 +363,8 @@ export default function App() {
 
       <hr />
 
-      {activeTab === 'home' && <HomeTab />}
-      {activeTab === 'contact' && <ContactTab />}
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'contact' && <Contact />}
     </>
   );
 }
@@ -384,16 +384,16 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/ContactTab.js active
-export default function ContactTab() {
+```js src/Contact.js active
+export default function Contact() {
   return (
     <div>
       <p>Send me a message!</p>
@@ -436,7 +436,7 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-This is because we're fully unmounting `ContactTab` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
+This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
 
 If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
 
@@ -445,8 +445,8 @@ If we switch to using an Activity boundary to show and hide the active tab, we c
 ```js src/App.js active
 import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('contact');
@@ -469,10 +469,10 @@ export default function App() {
       <hr />
 
       <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-        <HomeTab />
+        <Home />
       </Activity>
       <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
-        <ContactTab />
+        <Contact />
       </Activity>
     </>
   );
@@ -493,16 +493,16 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/ContactTab.js 
-export default function ContactTab() {
+```js src/Contact.js 
+export default function Contact() {
   return (
     <div>
       <p>Send me a message!</p>
@@ -915,7 +915,7 @@ This feature is called Selective Hydration, and it's an under-the-hood optimizat
 
 ## Troubleshooting {/*troubleshooting*/}
 
-### Preventing hidden content from having unwanted side effects {/*preventing-hidden-content-from-having-unwanted-side-effects*/}
+### My hidden components have unwanted side effects {/*my-hidden-components-have-unwanted-side-effects*/}
 
 An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their [Effects](/reference/react/useEffect). So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
 
@@ -928,8 +928,8 @@ As an example, consider a `<video>` tag. Typically it doesn't require any cleanu
 ```js src/App.js active
 import { useState } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import VideoTab from './VideoTab.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('video');
@@ -951,8 +951,8 @@ export default function App() {
 
       <hr />
 
-      {activeTab === 'home' && <HomeTab />}
-      {activeTab === 'video' && <VideoTab />}
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'video' && <Video />}
     </>
   );
 }
@@ -972,16 +972,16 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/VideoTab.js 
-export default function VideoTab() {
+```js src/Video.js 
+export default function Video() {
   return (
     <video
       // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
@@ -1034,8 +1034,8 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst
 ```js src/App.js active
 import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import VideoTab from './VideoTab.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('video');
@@ -1058,10 +1058,10 @@ export default function App() {
       <hr />
 
       <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-        <HomeTab />
+        <Home />
       </Activity>
       <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
-        <VideoTab />
+        <Video />
       </Activity>
     </>
   );
@@ -1082,16 +1082,16 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/VideoTab.js 
-export default function VideoTab() {
+```js src/Video.js 
+export default function Video() {
   return (
     <video
       controls
@@ -1139,7 +1139,7 @@ To fix this, we can add an Effect with a cleanup function that pauses the video:
 export default function VideoTab() {
   const ref = useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const videoRef = ref.current;
 
     return () => {
@@ -1159,6 +1159,8 @@ export default function VideoTab() {
 }
 ```
 
+We call `useLayoutEffect` instead of `useEffect` because conceptually the clean-up code is tied to the component's UI being visually hidden. If we used a regular effect, the code could be delayed by (say) a re-suspending Suspense boundary or a View Transition.
+
 Let's see the new behavior:
 
 <Sandpack>
@@ -1166,8 +1168,8 @@ Let's see the new behavior:
 ```js src/App.js active
 import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import HomeTab from './HomeTab.js';
-import VideoTab from './VideoTab.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('video');
@@ -1190,10 +1192,10 @@ export default function App() {
       <hr />
 
       <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
-        <HomeTab />
+        <Home />
       </Activity>
       <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
-        <VideoTab />
+        <Video />
       </Activity>
     </>
   );
@@ -1214,21 +1216,21 @@ export default function TabButton({ onClick, children, isActive }) {
 }
 ```
 
-```js src/HomeTab.js
-export default function HomeTab() {
+```js src/Home.js
+export default function Home() {
   return (
     <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/VideoTab.js 
-import { useRef, useEffect } from 'react';
+```js src/Video.js 
+import { useRef, useLayoutEffect } from 'react';
 
-export default function VideoTab() {
+export default function Video() {
   const ref = useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const videoRef = ref.current
 
     return () => {
@@ -1297,9 +1299,9 @@ To eagerly discover other Effects that don't have proper cleanup, which is impor
 ---
 
 
-### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
+### My hidden components have Effects that aren't running {/*my-hidden-components-have-effects-that-arent-running*/}
 
-When an `<Activity>` is "hidden", all Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
+When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
 
 If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
 

From ca9edf6816b450e8f705376735a8750696c255d8 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Mon, 21 Jul 2025 13:28:56 -0400
Subject: [PATCH 05/15] Use the same color code step for "visible"

---
 src/content/reference/react/Activity.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 3a365d8268e..adc6fd58593 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -891,9 +891,9 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
 
 ### Deferring hydration of low-priority content {/*deferring-hydration-of-low-priority-content*/}
 
-You can wrap part of your UI in a <CodeStep step={1}>visible</CodeStep> Activity boundary to defer mounting it on the initial render:
+You can wrap part of your UI in a <CodeStep step={3}>visible</CodeStep> Activity boundary to defer mounting it on the initial render:
 
-```jsx [[1,6,"\\"visible\\""]]
+```jsx [[3,6,"\\"visible\\""]]
 function Page() {
   return (
     <>

From b14dd5d37f70918cffd41fa59600fabb1cb5ede6 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Mon, 21 Jul 2025 13:30:10 -0400
Subject: [PATCH 06/15] Tidy

---
 src/content/reference/react/Activity.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index adc6fd58593..6a938f88896 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -907,7 +907,7 @@ function Page() {
 }
 ```
 
-During hydration, React will leave the visible Activity boundary unmounted while hydrating the rest of the page, improving the performance of higher-priority content. Once the rest of the page has fetched its code and data and been rendered, React will move on to mount any remaining visible Activity boundaries.
+During hydration, React will leave the visible Activity boundary unmounted while hydrating the rest of the page, improving the performance of higher-priority content. Once the high-priority content has fetched its code and data, and been rendered to the page, React will move on to mount any remaining visible Activity boundaries.
 
 This feature is called Selective Hydration, and it's an under-the-hood optimization of React that's integrated with Suspense. You can read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
 
@@ -1161,7 +1161,7 @@ export default function VideoTab() {
 
 We call `useLayoutEffect` instead of `useEffect` because conceptually the clean-up code is tied to the component's UI being visually hidden. If we used a regular effect, the code could be delayed by (say) a re-suspending Suspense boundary or a View Transition.
 
-Let's see the new behavior:
+Let's see the new behavior. Try playing the video, switching to the Home tab, then back to the Video tab:
 
 <Sandpack>
 
@@ -1278,7 +1278,7 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-It's working great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
+It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
 
 This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
 

From 771485dd2bc444c6d8c1b3c390e59d4d415073f4 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Mon, 21 Jul 2025 18:29:28 -0400
Subject: [PATCH 07/15] Typo

---
 src/content/reference/react/Activity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 6a938f88896..3d0f20931b7 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -47,7 +47,7 @@ You can use Activity to hide part of your application:
 
 When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will visually hide its <CodeStep step={2}>children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
 
-While hidden, children still receive updates, albeit at a lower priority then the rest of the content.
+While hidden, children still receive updates, albeit at a lower priority than the rest of the content.
 
 When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and create their Effects.
 

From bbf165f56175d23ca51701c6b88cf6c4f202c1df Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Thu, 24 Jul 2025 14:50:33 -0400
Subject: [PATCH 08/15] Update section on selective hydration

---
 src/content/reference/react/Activity.md | 135 ++++++++++++++++++++++--
 1 file changed, 124 insertions(+), 11 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 3d0f20931b7..e06ba3aadfd 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -47,7 +47,7 @@ You can use Activity to hide part of your application:
 
 When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will visually hide its <CodeStep step={2}>children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
 
-While hidden, children still receive updates, albeit at a lower priority than the rest of the content.
+While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.
 
 When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and create their Effects.
 
@@ -889,27 +889,140 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
 
 ---
 
-### Deferring hydration of low-priority content {/*deferring-hydration-of-low-priority-content*/}
 
-You can wrap part of your UI in a <CodeStep step={3}>visible</CodeStep> Activity boundary to defer mounting it on the initial render:
+### Reducing the time it takes to hydrate server-rendered content {/*reducing-the-time-it-takes-to-hydrate-server-rendered-content*/}
 
-```jsx [[3,6,"\\"visible\\""]]
+React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
+
+Suspense boundaries participate in Selective Hydration, because they naturally divide your component tree into units that are independent from one another:
+
+```jsx
 function Page() {
   return (
     <>
-      <Post />
-    
-      <Activity mode="visible">
-        <Comments />
+      <MessageComposer />
+
+      <Suspense fallback="Loading chats...">
+        <Chats />
+      </Suspense>
+    </>
+  )
+}
+```
+
+Here, `MessageComposer` can be fully hydrated during the initial render of the page, even before `Chats` is mounted and starts to fetch its data.
+
+So by breaking up your component tree into discrete units, Suspense allows React to hydrate your app's server-rendered HTML in chunks, enabling parts of your app to become interactive as fast as possible.
+
+But what about pages that don't use Suspense?
+
+Take this tabs example:
+
+```jsx
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      {activeTab === 'home' && (
+        <Home />
+      )}
+      {activeTab === 'video' && (
+        <Video />
+      )}
+    </>
+  )
+}
+```
+
+Here, React must hydrate the entire page all at once. If `Home` or `Video` are slower to render, they could make the tab buttons feel unresponsive during hydration.
+
+Adding Suspense around the active tab would solve this:
+
+```jsx {13,20}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Suspense fallback={<Placeholder />}>
+        {activeTab === 'home' && (
+          <Home />
+        )}
+        {activeTab === 'video' && (
+          <Video />
+        )}
+      </Suspense>
+    </>
+  )
+}
+```
+
+...but it would also change the UI, since the `Placeholder` fallback would be displayed on the initial render.
+
+Instead, we can use Activity. Since Activity boundaries show and hide their children, they already naturally divide the component tree into independent units. And just like Suspense, this feature allows them to participate in Selective Hydration.
+
+Let's update our example to use Activity boundaries around the active tab:
+
+```jsx {13-18}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Activity mode={activeTab === "home" ? "visible" : "hidden"}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === "video" ? "visible" : "hidden"}>
+        <Video />
       </Activity>
     </>
   )
 }
 ```
 
-During hydration, React will leave the visible Activity boundary unmounted while hydrating the rest of the page, improving the performance of higher-priority content. Once the high-priority content has fetched its code and data, and been rendered to the page, React will move on to mount any remaining visible Activity boundaries.
+Now our initial server-rendered HTML looks the same as it did in the original version, but thanks to Activity, React can hydrate the tab buttons first, before it even mounts `Home` or `Video`.
 
-This feature is called Selective Hydration, and it's an under-the-hood optimization of React that's integrated with Suspense. You can read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more.
+---
+
+Thus, in addition to hiding and showing content, Activity boundaries help improve your app's performance during hydration by letting React know which parts of your page can become interactive in isolation.
+
+And even if your page doesn't ever hide part of its content, you can still add always-visible Activity boundaries to improve hydration performance:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <Post />
+
+      <Activity>
+        <Comments />
+      </Activity>
+    </>
+  );
+} 
+```
 
 ---
 
@@ -917,7 +1030,7 @@ This feature is called Selective Hydration, and it's an under-the-hood optimizat
 
 ### My hidden components have unwanted side effects {/*my-hidden-components-have-unwanted-side-effects*/}
 
-An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their [Effects](/reference/react/useEffect). So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their Effects. So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
 
 But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
 

From c169d0bf70c41abe441c6aa818040105223365b8 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Fri, 25 Jul 2025 12:53:05 -0400
Subject: [PATCH 09/15] Update title

---
 src/content/reference/react/Activity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index e06ba3aadfd..79e75e59c25 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -890,7 +890,7 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
 ---
 
 
-### Reducing the time it takes to hydrate server-rendered content {/*reducing-the-time-it-takes-to-hydrate-server-rendered-content*/}
+### Speeding up interactions during page load {/*speeding-up-interactions-during-page-load*/}
 
 React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
 

From fac55250cc192b5efedddc5463f6fef54561c6d7 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Fri, 25 Jul 2025 15:01:23 -0400
Subject: [PATCH 10/15] Clean up props

---
 src/content/reference/react/Activity.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 79e75e59c25..dd775631152 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -58,14 +58,11 @@ In this way, Activity can thought of as a mechanism for rendering "background ac
 #### Props {/*props*/}
 
 * `children`: The UI you intend to show and hide.
-* **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed. 
+* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. 
 
 #### Caveats {/*caveats*/}
 
-- While hidden, the `children` of `<Activity>` are visually hidden on the page. 
-- `<Activity>` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
 - When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
-- Parts of the UI wrapped in `<Activity mode="visible">` will hydrate at a lower priority than other content.
 
 ---
 

From 3f7e05d6d2c74bcb4db80fc933af3fc16489a71a Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Tue, 29 Jul 2025 21:34:20 -0400
Subject: [PATCH 11/15] Tweak wording

---
 src/content/reference/react/Activity.md |  2 +-
 src/pages/[[...markdownPath]].js        | 27 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index dd775631152..3bad0044e19 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -51,7 +51,7 @@ While hidden, children still re-render in response to new props, albeit at a low
 
 When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and create their Effects.
 
-In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than unmounting content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state.
+In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state.
 
 [See more examples below.](#usage)
 
diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js
index bef4508df06..ddfe44bd931 100644
--- a/src/pages/[[...markdownPath]].js
+++ b/src/pages/[[...markdownPath]].js
@@ -14,7 +14,34 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 import compileMDX from 'utils/compileMDX';
 import {generateRssFeed} from '../utils/rss';
 
+import {useEffect} from 'react';
+
+export function useScrollRestoration(key) {
+  // Restore scroll position on page load
+  useEffect(() => {
+    const saved = sessionStorage.getItem(key);
+    if (saved) {
+      const {x, y} = JSON.parse(saved);
+      window.scrollTo(x, y);
+    }
+  }, [key]);
+
+  // Save scroll position on unload
+  useEffect(() => {
+    const save = () => {
+      sessionStorage.setItem(
+        key,
+        JSON.stringify({x: window.scrollX, y: window.scrollY})
+      );
+    };
+
+    window.addEventListener('beforeunload', save);
+    return () => window.removeEventListener('beforeunload', save);
+  }, [key]);
+}
+
 export default function Layout({content, toc, meta, languages}) {
+  useScrollRestoration();
   const parsedContent = useMemo(
     () => JSON.parse(content, reviveNodeOnClient),
     [content]

From 8e35602df435699180b1df04904bbcf1f8ff7781 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Wed, 30 Jul 2025 07:38:33 -0400
Subject: [PATCH 12/15] wip

---
 src/content/reference/react/Activity.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 3bad0044e19..a8ab76337e8 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -45,11 +45,11 @@ You can use Activity to hide part of your application:
 </Activity>
 ```
 
-When an Activity boundary becomes <CodeStep step={1}>hidden</CodeStep>, React will visually hide its <CodeStep step={2}>children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep>, React will visually hide <CodeStep step={2}>its children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
 
 While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.
 
-When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and create their Effects.
+When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
 
 In this way, Activity can thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state.
 

From 791375dd3c0b46c840430d9fd3a49d2b83d9bd53 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Wed, 30 Jul 2025 07:42:04 -0400
Subject: [PATCH 13/15] wip

---
 src/content/reference/react/Activity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index a8ab76337e8..c7081004903 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -92,7 +92,7 @@ This makes it possible to restore components to their previous state.
 
 The following example has a sidebar with an expandable section – you can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
-Try expanding the Overview section, then toggling the sidebar closed then open:
+Try expanding the Overview section, then toggling the sidebar closed and open:
 
 <Sandpack>
 

From 0515c968d79ed3ae257a54e698ca3c8f73c1d47a Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Wed, 30 Jul 2025 07:48:37 -0400
Subject: [PATCH 14/15] wip

---
 src/content/reference/react/Activity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index c7081004903..b57ed5de3ed 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -1388,7 +1388,7 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 
 </Sandpack>
 
-It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to watch it.
+It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to keep watching it.
 
 This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
 

From 39cc1356d52f66ac4f11cd496ab458e0e5cf1e04 Mon Sep 17 00:00:00 2001
From: Sam Selikoff <sam.selikoff@gmail.com>
Date: Wed, 30 Jul 2025 07:49:21 -0400
Subject: [PATCH 15/15] remove temporary scroll restoration while working on
 docs

---
 src/pages/[[...markdownPath]].js | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js
index ddfe44bd931..bef4508df06 100644
--- a/src/pages/[[...markdownPath]].js
+++ b/src/pages/[[...markdownPath]].js
@@ -14,34 +14,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 import compileMDX from 'utils/compileMDX';
 import {generateRssFeed} from '../utils/rss';
 
-import {useEffect} from 'react';
-
-export function useScrollRestoration(key) {
-  // Restore scroll position on page load
-  useEffect(() => {
-    const saved = sessionStorage.getItem(key);
-    if (saved) {
-      const {x, y} = JSON.parse(saved);
-      window.scrollTo(x, y);
-    }
-  }, [key]);
-
-  // Save scroll position on unload
-  useEffect(() => {
-    const save = () => {
-      sessionStorage.setItem(
-        key,
-        JSON.stringify({x: window.scrollX, y: window.scrollY})
-      );
-    };
-
-    window.addEventListener('beforeunload', save);
-    return () => window.removeEventListener('beforeunload', save);
-  }, [key]);
-}
-
 export default function Layout({content, toc, meta, languages}) {
-  useScrollRestoration();
   const parsedContent = useMemo(
     () => JSON.parse(content, reviveNodeOnClient),
     [content]