diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 22b75016..12fe3210 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -755,9 +755,7 @@ function CommunityGallery() {
   }, []);
 
   return (
-    <div
-      ref={ref}
-      className="relative flex overflow-x-hidden overflow-y-visible w-auto">
+    <div ref={ref} className="relative flex overflow-x-clip w-auto">
       <div
         className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
         style={{
@@ -784,21 +782,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
+            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
           )}>
           <div
             className={cn(
-              'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
               i % 2 === 0
-                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
-                : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
+                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
+                : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
             )}>
-            <img
-              loading={isLazy ? 'lazy' : 'eager'}
-              src={src}
-              alt={alt}
-              className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
-            />
+            <div
+              className={cn(
+                'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
+              )}>
+              <img
+                loading={isLazy ? 'lazy' : 'eager'}
+                src={src}
+                alt={alt}
+                className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+              />
+            </div>
           </div>
         </div>
       ))}
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index ec8d0f61..11acbadd 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2247,7 +2247,11 @@ body {
 
 </Sandpack>
 
+<<<<<<< HEAD
 Unapozunguka kupitia orodha ya `history` ndani ya function unayopitisha kwa `map`, hoja ya `squares` inapitia kila kipengele cha `history`, na hoja ya `move` inapitia kila kiashiria cha orodha: `0`, `1`, `2`, …. (Katika hali nyingi, ungehitaji vipengele halisi vya orodha, lakini ili kuonyesha orodha ya harakati utahitaji tu viashiria.)
+=======
+As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+>>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 Kwa kila harakati katika historia ya mchezo wa tic-tac-toe, unaunda kipengele cha orodha `<li>` kinachojumuisha kitufe `<button>`. Kitufe kinakuwa na kihariri cha `onClick` kinachoitwa function inayoitwa `jumpTo` (ambayo huja kuwa umeitekeleza bado).
 
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 8b103938..562e64a8 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 part of the UI.
-
+`<Activity>` lets you hide and restore the UI and internal state of its children.
 
 ```js
-<Activity mode={mode}>
-  <Page />
+<Activity mode={visibility}>
+  <Sidebar />
 </Activity>
 ```
 
@@ -38,223 +37,270 @@ 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';
+You can use Activity to hide part of your application:
 
-<Activity mode={isVisible ? 'visible' : 'hidden'}>
-  <Page />
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </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.
+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.
 
-In the future, "hidden" Activities may automatically destroy state based on resources like memory.
+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, while ensuring hidden content has no unwanted side effects.
+
+[See more examples below.](#usage)
 
 #### Props {/*props*/}
 
-* `children`: The actual UI you intend to render.
-* **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. 
+* `children`: The UI you intend to show and hide.
+* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. 
 
 #### Caveats {/*caveats*/}
 
-- While hidden, the `children` of `<Activity>` are 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*/}
 
-### Pre-render part of the UI {/*pre-render-part-of-the-ui*/}
+### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-You can pre-render part of the UI using `<Activity mode="hidden">`:
+Typically in React, when you want to conditionally show or hide a component, you mount and unmount it:
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+```jsx
+{isShowingSidebar && (
+  <Sidebar />
+)}
+```
+
+But unmounting a component destroys its internal state, which is not always what you want.
+
+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>
 ```
 
-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. 
+This makes it possible to restore components to their previous 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.
+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.
 
-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:
+Try expanding the Overview section, then toggling the sidebar closed and open:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+```js src/App.js active
+import { useState } from 'react';
+import Sidebar from './Sidebar.js';
+
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
-      >
-        Posts
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
-      >
-        Contact
-      </TabButton>
-      <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+    <>
+      {isShowingSidebar && (
+        <Sidebar />
+      )}
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
+```js src/Sidebar.js
+import { useState } from 'react';
 
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
+    <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>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```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;
+}
+```
 
-export default function AboutTab() {
-  return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
-  );
+```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"
+  }
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+</Sandpack>
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
+The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
+This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 
-export default PostsTab;
-```
+Let's replace the conditional rendering of our sidebar with an Activity boundary:
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```jsx {7,9}
+// Before
+{isShowingSidebar && (
+  <Sidebar />
+)}
 
-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>
-  );
-}
+// After
+<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+  <Sidebar />
+</Activity>
 ```
 
+and check out 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 { unstable_Activity as Activity, useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
-  }
+  return (
+    <>
+      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+        <Sidebar />
+      </Activity>
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
+  );
 }
+```
 
-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/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; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+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
@@ -276,172 +322,91 @@ 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.
+Our sidebar's internal state is now restored, without any changes to its implementation.
+
+---
+
+### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/}
 
-We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden `<Activity>`: 
+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>` 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>
 
-```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 } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+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")}>
-        Posts
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
+      <TabButton
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('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>
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'contact' && <Contact />}
+    </>
   );
 }
 ```
 
-
-```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';
-
-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';
-import { fetchData } from './data.js';
-
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
+```js src/Contact.js active
+export default function Contact() {
   return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+    <div>
+      <p>Send me a message!</p>
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <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>
   );
 }
 ```
 
-
-```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 }
@@ -468,153 +433,217 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
----
-
-### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/}
-
-
-You can keep state for parts of the UI by switching `<Activity>` from "visible" to "hidden":
-
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
-</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 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.
-
-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:
+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:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js active
+import { 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';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
 
-export default function TabContainer() {
-  const [tab, setTab] = 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>
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
+        <Contact />
+      </Activity>
+    </>
   );
 }
 ```
 
-
-```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';
-
-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';
-import { fetchData } from './data.js';
+```js src/Contact.js 
+export default function Contact() {
+  return (
+    <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>
+  );
+}
+```
+
+```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>
+
+Again, the Activity boundary let us preserve the Contact tab's internal state without changing its implementation.
+
+---
+
+### 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.
+
+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
+import { useState, Suspense } 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');
 
-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 === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
+        Posts
+      </TabButton>
+
+      <hr />
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
+    </>
   );
 }
+```
+
+```js src/TabButton.js hidden
+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/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
 
-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>
+    <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.
@@ -658,6 +687,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 +709,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 `App` doesn't mount `Posts` until its tab is active.
+
+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.
 
+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 +840,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,269 +862,511 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+`Posts` was able to prepare itself for a faster render, thanks to the hidden Activity boundary.
+
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+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.
 
-### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
+<Note>
 
-When an `<Activity>` is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later. 
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
 
-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.
+- 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)
 
-Consider the following example, where a different video is played for each button:
+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.
 
-<Sandpack>
+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. 
 
-```js
-import { useState, useRef, useEffect } from 'react';
-import './checker.js';
+</Note>
 
-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/>;
+### 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.
+
+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 (
+    <>
+      <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>
+    </>
+  )
+}
+```
+
+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`.
+
+---
+
+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>
+    </>
+  );
+} 
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### 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. 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 Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   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"
-        />
-      }
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'video' && <Video />}
     </>
   );
 }
 ```
 
-```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}`);
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
-    
-}, 50);
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
 ```
 
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```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
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
+    />
+
+  );
+}
+```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
+
+```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 video stops playing as expected.
 
-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:
+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 a great use case for Activity!
 
-<Sandpack>
+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:
 
-```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();
-    }
-  }, []);
+<Sandpack>
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   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 />
+      <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'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
-        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}`);
-        }
-      }
+```js src/Video.js 
+export default function Video() {
+  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"
+    />
 
-    }, 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; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
-</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":
+```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>
 
-<Sandpack>
+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.
 
-```js
-import { useState, useRef, useEffect, unstable_Activity as Activity } from 'react';
-import VideoChecker from './checker.js';
+To fix this, we can add an Effect with a cleanup function that pauses the video:
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const videoRef = ref.current;
-    videoRef.play();
-    
+
     return () => {
-      videoRef.pause();
+      videoRef.pause()
     }
   }, []);
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
+  );
 }
+```
+
+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. Try playing the video, switching to the Home tab, then back to the Video tab:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   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" />
+      <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'}>
+        <Home />
       </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 mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
       </Activity>
-      <VideoChecker />
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
-        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}`);
-        }
-      }
+```js src/Video.js 
+import { useRef, useLayoutEffect } from 'react';
+
+export default function Video() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current
 
-    }, 50);
-    
     return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
-    }
-  });
-  
-}
+      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"
+    />
+
+  );
+}
 ```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -1154,8 +1388,31 @@ video { width: 300px; margin-top: 10px; }
 
 </Sandpack>
 
-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. 
+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.
+
+---
+
+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). 
+
+---
+
+
+### My hidden components have Effects that aren't running {/*my-hidden-components-have-effects-that-arent-running*/}
+
+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.
 
-### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+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.
 
-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.