From 7a32c8a67af39eca0391fcb1ed9063577bc2b2a8 Mon Sep 17 00:00:00 2001
From: Laxmana Megalamani <laxmanmegalamani5@gmail.com>
Date: Tue, 18 Aug 2026 01:07:53 +0530
Subject: [PATCH 1/7] Fix YouTube video overflow on mobile (#8609)

---
 src/content/versions.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/content/versions.md b/src/content/versions.md
index 2c2e3620..87c68115 100644
--- a/src/content/versions.md
+++ b/src/content/versions.md
@@ -325,4 +325,7 @@ See the first blog post: [Why did we build React?](https://legacy.reactjs.org/bl
 
 React was open sourced at Facebook Seattle in 2013:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/XxVg_s8xAms?si=466vSJrnXTn05j9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<YouTubeIframe
+  title="React was open sourced at Facebook Seattle in 2013"
+  src="https://www.youtube.com/embed/XxVg_s8xAms?si=466vSJrnXTn05j9A"
+/>

From e730fd0dd71f3b26a9988cc5c1774dc7a39fa486 Mon Sep 17 00:00:00 2001
From: Nasser <sdnssr001@gmail.com>
Date: Tue, 18 Aug 2026 21:45:59 +0200
Subject: [PATCH 2/7] Add cache, cacheSignal, and captureOwnerStack to the APIs
 overview (#8597)

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

diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 777b8fc7..51438ad9 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -15,6 +15,9 @@ In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react
 * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
 * [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
+* [`cache`](/reference/react/cache) lets you cache the result of a data fetch or computation.
+* [`cacheSignal`](/reference/react/cacheSignal) lets you know when the `cache()` lifetime is over.
+* [`captureOwnerStack`](/reference/react/captureOwnerStack) reads the current Owner Stack in development and returns it as a string if available.
 
 ---
 

From 96ad418a9a8f00fb63e7d6c56400384b37539138 Mon Sep 17 00:00:00 2001
From: Josh Story <gnoff@storyposted.com>
Date: Wed, 19 Aug 2026 11:12:12 -0700
Subject: [PATCH 3/7] Document browser-only rendering (#8582)

* Document browser-only rendering

Add the Canary browser API reference, including optional lazy reasons, server bailout reporting, fatal and abort behavior, navigation entries, and onBrowserBailout options for every streaming, resume, and prerender API that supports it.

* Polish browser API docs and add live example

* Document browser with use and Suspense

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 src/content/reference/react-dom/browser.md    | 293 ++++++++++++++++++
 src/content/reference/react-dom/index.md      |   6 +
 .../server/renderToPipeableStream.md          |   1 +
 .../server/renderToReadableStream.md          |   1 +
 .../reference/react-dom/server/resume.md      |   1 +
 .../server/resumeToPipeableStream.md          |   1 +
 .../reference/react-dom/static/prerender.md   |   1 +
 .../react-dom/static/prerenderToNodeStream.md |   1 +
 .../react-dom/static/resumeAndPrerender.md    |   1 +
 .../static/resumeAndPrerenderToNodeStream.md  |   1 +
 src/content/reference/react/Suspense.md       | 123 ++++++++
 src/content/reference/react/use.md            | 156 ++++++++++
 src/sidebarReference.json                     |   5 +
 13 files changed, 591 insertions(+)
 create mode 100644 src/content/reference/react-dom/browser.md

diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
new file mode 100644
index 00000000..11f787d2
--- /dev/null
+++ b/src/content/reference/react-dom/browser.md
@@ -0,0 +1,293 @@
+---
+title: browser
+version: canary
+---
+
+<Intro>
+
+<Canary>
+
+**The `browser` API is currently only available in React’s Canary and Experimental channels.**
+
+[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+
+</Canary>
+
+`browser` lets you mark a component as browser-only during server rendering.
+
+```js
+use(browser(reason?))
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `browser(reason?)` {/*browser*/}
+
+Call `browser` inside [`use`](/reference/react/use) to mark a component as browser-only during server rendering:
+
+```js
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+function BrowserOnly() {
+  use(browser('This component requires browser APIs.'));
+  return <BrowserContent />;
+}
+```
+
+During server rendering, `use(browser())` stops rendering the component and leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in its place. In the browser, `use(browser())` returns `undefined`, so the component renders normally.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* **optional** `reason`: A string or function that explains why the content needs to render in the browser. The string or the function's return value becomes the `cause` of the `Error` passed to [`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server). React calls a reason function each time a server renderer encounters the value returned by `browser`, but does not call it in the browser. If creating the reason is expensive, pass a function such as `() => new Error(...)`.
+
+#### Returns {/*returns*/}
+
+`browser` returns a value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+* `use(browser())` must be inside a `<Suspense>` boundary during server rendering. Without one, the server render fails.
+* In a React Server Components app, `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components).
+* Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it.
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering content only in the browser {/*rendering-content-only-in-the-browser*/}
+
+Call `browser` inside `use` in a component that should only render in the browser:
+
+You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering.
+
+Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+
+<Sandpack>
+
+```js src/App.js active
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function BrowserOnlyEditor() {
+  use(browser('The editor requires browser APIs.'));
+  return <label>Draft: <input /></label>;
+}
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading editor...</p>}>
+      <BrowserOnlyEditor />
+    </Suspense>
+  );
+}
+```
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+  return (
+    <html lang="en">
+      <head>
+        <title>Article editor</title>
+      </head>
+      <body>
+        <h1>Article editor</h1>
+        <App />
+      </body>
+    </html>
+  );
+}
+```
+
+```js src/index.js
+import { hydrateRoot } from 'react-dom/client';
+import { renderToReadableStream } from 'react-dom/server';
+import Document from './Document.js';
+import { flushReadableStreamToFrame } from './demo-helpers.js';
+import './styles.css';
+
+async function main(frame) {
+  const stream = await renderToReadableStream(<Document />);
+  await flushReadableStreamToFrame(stream, frame);
+
+  // Wait so both the fallback and hydrated content are visible.
+  await new Promise(resolve => setTimeout(resolve, 1200));
+  hydrateRoot(frame.contentDocument, <Document />);
+}
+
+const renderButton = document.getElementById('render');
+renderButton.addEventListener('click', () => {
+  renderButton.disabled = true;
+  main(document.getElementById('preview'));
+}, { once: true });
+```
+
+```js src/demo-helpers.js hidden
+export async function flushReadableStreamToFrame(readable, frame) {
+  const doc = frame.contentWindow.document;
+  const decoder = new TextDecoder();
+  for await (const chunk of readable) {
+    doc.write(decoder.decode(chunk, { stream: true }));
+  }
+  doc.close();
+}
+```
+
+```html public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Browser-only rendering</title>
+</head>
+<body>
+  <button id="render">Render the page</button>
+  <br /><br />
+  <iframe id="preview" title="Rendered page"></iframe>
+</body>
+</html>
+```
+
+```css src/styles.css hidden
+iframe {
+  width: 100%;
+  height: 180px;
+  border: 1px solid #aaa;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Note>
+
+In a React Server Components app, `use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component:
+
+```js {1}
+'use client';
+
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+export default function BrowserOnlyEditor() {
+  use(browser('The editor requires browser APIs.'));
+  return <Editor />;
+}
+```
+
+</Note>
+
+---
+
+### Conditionally rendering in the browser {/*conditionally-rendering-in-the-browser*/}
+
+Like other calls to [`use`](/reference/react/use), you can call `use(browser())` conditionally or inside a custom Hook. For example, you can wrap a Suspense-enabled data-fetching library's `useQuery` and skip server rendering when initial data is missing:
+
+```js {3}
+function useBrowserQuery(query, options) {
+  if (options.initialData === undefined) {
+    use(browser('useBrowserQuery: No initial data was provided.'));
+  }
+
+  return useQuery(query, options);
+}
+
+function ProductDetails({ productId, initialData }) {
+  const product = useBrowserQuery(`/api/products/${productId}`, {
+    initialData,
+  });
+
+  return <h1>{product.name}</h1>;
+}
+```
+
+On the server, `useBrowserQuery` calls `useQuery` only when `initialData` is available. Otherwise, the closest Suspense boundary's fallback remains in the HTML. In the browser, `use(browser())` returns `undefined`, so the query library can fetch the data or read it from its client cache.
+
+---
+
+### Reporting browser-only rendering on the server {/*reporting-browser-only-rendering-on-the-server*/}
+
+Pass an `onBrowserBailout` callback to the server renderer to report browser-only rendering. When React leaves a Suspense fallback for the browser, it does not call the server renderer's `onError` callback or [`hydrateRoot`'s `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) callback. This example also passes a reason, which is available as the reported error's `cause`:
+
+```js
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+import { renderToPipeableStream } from 'react-dom/server';
+
+function BrowserOnlyEditor() {
+  use(browser(() => new Error('The editor requires a browser API.')));
+  return <Editor />;
+}
+
+const { pipe } = renderToPipeableStream(
+  <Suspense fallback={<p>Loading editor...</p>}>
+    <BrowserOnlyEditor />
+  </Suspense>,
+  {
+    onShellReady() {
+      pipe(response);
+    },
+    onBrowserBailout(error, errorInfo) {
+      logBrowserBailout(error, errorInfo);
+    }
+  }
+);
+```
+
+`onBrowserBailout` receives two arguments:
+
+1. An `Error` describing the browser-only render. If you passed a reason to `browser`, it is available as the error's `cause`.
+2. An `errorInfo` object with a `componentStack` showing where browser-only rendering occurred.
+
+The reason function can return any value. Return a new `Error` to give the cause its own stack without creating the `Error` in the browser. React does not serialize the reason into the HTML.
+
+If there is no Suspense boundary to provide a fallback, the server render fails. React reports the failure through the renderer's usual error callbacks instead of `onBrowserBailout`.
+
+---
+
+### Aborting pending server rendering for the browser {/*aborting-pending-server-rendering-for-the-browser*/}
+
+If you call a server rendering API directly, you can stop waiting for pending content and let the browser finish rendering it. Pass the value returned by `browser` as the reason when aborting the server render. React then leaves pending Suspense boundaries in their fallback state and renders their content in the browser:
+
+```js {1,8}
+import { browser } from 'react-dom';
+import { renderToPipeableStream } from 'react-dom/server';
+
+const { pipe, abort } = renderToPipeableStream(<App />, {
+  onShellReady() {
+    pipe(response);
+    setTimeout(() => {
+      abort(browser('The server render timed out.'));
+    }, 10000);
+  }
+});
+```
+
+A `browser` abort reason does not trigger the server renderer's `onError` callback or `hydrateRoot`'s `onRecoverableError` callback. Instead, the server renderer reports each recovered Suspense boundary to `onBrowserBailout`.
+
+For server rendering APIs that accept an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), pass `browser()` as the reason to [`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index d01bd656..6f118844 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -30,6 +30,12 @@ These APIs can be used to make apps faster by pre-loading resources such as scri
 * [`preinit`](/reference/react-dom/preinit) lets you fetch and evaluate an external script or fetch and insert a stylesheet.
 * [`preinitModule`](/reference/react-dom/preinitModule) lets you fetch and evaluate an ESM module.
 
+## Server Rendering APIs {/*server-rendering-apis*/}
+
+This API controls how components render on the server:
+
+* <CanaryBadge /> [`browser`](/reference/react-dom/browser) lets you mark a component as browser-only during server rendering.
+
 ---
 
 ## Entry points {/*entry-points*/}
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 9668e01b..5d48c6a6 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -56,6 +56,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
   * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content.
   * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell.  It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell)
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index 7ee0a0bc..d483780d 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -56,6 +56,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
   * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted.
   * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index ad61f6da..4feb20d5 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -48,6 +48,7 @@ async function handler(request, writable) {
 * **optional** `options`: An object with streaming options.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
 
 
diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md
index 48caa3be..0314cbb2 100644
--- a/src/content/reference/react-dom/server/resumeToPipeableStream.md
+++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md
@@ -51,6 +51,7 @@ async function handler(request, response) {
 * **optional** `options`: An object with streaming options.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`.
   * **optional** `onShellReady`: A callback that fires right after the [shell](#specifying-what-goes-into-the-shell) has finished. You can call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `<script>` tags that replace the HTML loading fallbacks with the content.
   * **optional** `onShellError`: A callback that fires if there was an error rendering the shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell](#recovering-from-errors-inside-the-shell) or use the prelude.
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
index 811e5fc6..a674feae 100644
--- a/src/content/reference/react-dom/static/prerender.md
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -55,6 +55,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
   * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted.
   * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index 040357b2..2ecf77b3 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -56,6 +56,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
   * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
   * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md
index 10b240dd..66b523c7 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerender.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerender.md
@@ -53,6 +53,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 * `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`.
 
 #### Returns {/*returns*/}
diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
index 4ce3c473..309dab69 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
@@ -49,6 +49,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 * `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
+  * <CanaryBadge /> **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`.
 
 #### Returns {/*returns*/}
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 8051ca01..7a2d161e 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2374,6 +2374,129 @@ The server HTML will include the loading indicator. It will be replaced by the `
 
 ---
 
+### <CanaryBadge /> Providing a fallback for browser-only content {/*providing-a-fallback-for-browser-only-content*/}
+
+A Suspense boundary can provide a fallback for a browser-only component. Wrap the component in `<Suspense>` and call [`use(browser())`](/reference/react/use#use-browser) inside it.
+
+Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+
+<Sandpack>
+
+```js src/App.js active
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function BrowserOnlyEditor() {
+  use(browser('The editor requires browser APIs.'));
+  return <label>Draft: <input /></label>;
+}
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading editor...</p>}>
+      <BrowserOnlyEditor />
+    </Suspense>
+  );
+}
+```
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+  return (
+    <html lang="en">
+      <head>
+        <title>Article editor</title>
+      </head>
+      <body>
+        <h1>Article editor</h1>
+        <App />
+      </body>
+    </html>
+  );
+}
+```
+
+```js src/index.js
+import { hydrateRoot } from 'react-dom/client';
+import { renderToReadableStream } from 'react-dom/server';
+import Document from './Document.js';
+import { flushReadableStreamToFrame } from './demo-helpers.js';
+import './styles.css';
+
+async function main(frame) {
+  const stream = await renderToReadableStream(<Document />);
+  await flushReadableStreamToFrame(stream, frame);
+
+  // Wait so both the fallback and hydrated content are visible.
+  await new Promise(resolve => setTimeout(resolve, 1200));
+  hydrateRoot(frame.contentDocument, <Document />);
+}
+
+const renderButton = document.getElementById('render');
+renderButton.addEventListener('click', () => {
+  renderButton.disabled = true;
+  main(document.getElementById('preview'));
+}, { once: true });
+```
+
+```js src/demo-helpers.js hidden
+export async function flushReadableStreamToFrame(readable, frame) {
+  const doc = frame.contentWindow.document;
+  const decoder = new TextDecoder();
+  for await (const chunk of readable) {
+    doc.write(decoder.decode(chunk, { stream: true }));
+  }
+  doc.close();
+}
+```
+
+```html public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Browser-only rendering</title>
+</head>
+<body>
+  <button id="render">Render the page</button>
+  <br /><br />
+  <iframe id="preview" title="Rendered page"></iframe>
+</body>
+</html>
+```
+
+```css src/styles.css hidden
+iframe {
+  width: 100%;
+  height: 180px;
+  border: 1px solid #aaa;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+During server rendering, React includes the Suspense boundary's fallback in the HTML. In the browser, React replaces the fallback with the editor.
+
+---
+
 ### Waiting for a stylesheet to load {/*waiting-for-a-stylesheet-to-load*/}
 
 A stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop](/reference/react-dom/components/link#special-rendering-behavior) blocks the Suspense boundary until the stylesheet loads, up to a timeout, so the content doesn't appear unstyled.
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index a5187326..bd58401e 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -80,6 +80,39 @@ The resolved value of the Promise.
 
 ---
 
+### <CanaryBadge /> `use(browser())` {/*use-browser*/}
+
+Call `use` with the value returned by [`browser`](/reference/react-dom/browser) in a component that should only render in the browser:
+
+```js
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+function BrowserOnly() {
+  use(browser('This component requires browser APIs.'));
+  return <BrowserContent />;
+}
+```
+
+During server rendering, the component calling `use(browser())` suspends and React includes the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `use(browser())` returns `undefined`, so the component renders normally.
+
+[See an example below.](#rendering-a-component-only-in-the-browser)
+
+#### Parameters {/*browser-parameters*/}
+
+* `browserValue`: The value returned by [`browser`](/reference/react-dom/browser).
+
+#### Returns {/*browser-returns*/}
+
+`use(browser())` returns `undefined` in the browser.
+
+#### Caveats {/*browser-caveats*/}
+
+* The component calling `use(browser())` must be inside a `<Suspense>` boundary during server rendering. Without one, server rendering fails.
+* In a React Server Components app, `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components).
+
+---
+
 ## Usage (Context) {/*usage-context*/}
 
 ### Reading context with `use` {/*reading-context-with-use*/}
@@ -1293,6 +1326,129 @@ async function getData(url) {
 
 ---
 
+### <CanaryBadge /> Rendering a component only in the browser {/*rendering-a-component-only-in-the-browser*/}
+
+Pass the value returned by [`browser`](/reference/react-dom/browser) to `use` inside a component that should only render in the browser.
+
+Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+
+<Sandpack>
+
+```js src/App.js active
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function BrowserOnlyEditor() {
+  use(browser('The editor requires browser APIs.'));
+  return <label>Draft: <input /></label>;
+}
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading editor...</p>}>
+      <BrowserOnlyEditor />
+    </Suspense>
+  );
+}
+```
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+  return (
+    <html lang="en">
+      <head>
+        <title>Article editor</title>
+      </head>
+      <body>
+        <h1>Article editor</h1>
+        <App />
+      </body>
+    </html>
+  );
+}
+```
+
+```js src/index.js
+import { hydrateRoot } from 'react-dom/client';
+import { renderToReadableStream } from 'react-dom/server';
+import Document from './Document.js';
+import { flushReadableStreamToFrame } from './demo-helpers.js';
+import './styles.css';
+
+async function main(frame) {
+  const stream = await renderToReadableStream(<Document />);
+  await flushReadableStreamToFrame(stream, frame);
+
+  // Wait so both the fallback and hydrated content are visible.
+  await new Promise(resolve => setTimeout(resolve, 1200));
+  hydrateRoot(frame.contentDocument, <Document />);
+}
+
+const renderButton = document.getElementById('render');
+renderButton.addEventListener('click', () => {
+  renderButton.disabled = true;
+  main(document.getElementById('preview'));
+}, { once: true });
+```
+
+```js src/demo-helpers.js hidden
+export async function flushReadableStreamToFrame(readable, frame) {
+  const doc = frame.contentWindow.document;
+  const decoder = new TextDecoder();
+  for await (const chunk of readable) {
+    doc.write(decoder.decode(chunk, { stream: true }));
+  }
+  doc.close();
+}
+```
+
+```html public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Browser-only rendering</title>
+</head>
+<body>
+  <button id="render">Render the page</button>
+  <br /><br />
+  <iframe id="preview" title="Rendered page"></iframe>
+</body>
+</html>
+```
+
+```css src/styles.css hidden
+iframe {
+  width: 100%;
+  height: 180px;
+  border: 1px solid #aaa;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+During server rendering, `use(browser())` suspends the component and React includes the closest Suspense boundary's fallback in the HTML. In the browser, `use(browser())` returns `undefined` and the editor renders normally.
+
+---
+
 ## Troubleshooting {/*troubleshooting*/}
 
 ### I'm getting an error: "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 622fa687..06bb6d1c 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -248,6 +248,11 @@
       "title": "APIs",
       "path": "/reference/react-dom",
       "routes": [
+        {
+          "title": "browser",
+          "path": "/reference/react-dom/browser",
+          "version": "canary"
+        },
         {
           "title": "createPortal",
           "path": "/reference/react-dom/createPortal"

From 5b3692aff0a05a14f19af057bee43af63e91470d Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Wed, 19 Aug 2026 22:08:28 +0200
Subject: [PATCH 4/7] Clarify browser-only rendering guidance (#8612)

* Clarify browser-only rendering guidance

* Polish browser-only guidance wording

* Use Canary markers in browser guidance

* Present browser as a use resource

* Polish browser usage labels

* Address browser guidance review

* Clarify browser return value is opaque

* Restore alternative wording

* Restore hydration alternative wording

* Focus use introduction on resources

* Note stable browser cleanup
---
 src/content/reference/react-dom/browser.md            | 2 +-
 src/content/reference/react-dom/client/hydrateRoot.md | 6 ++++++
 src/content/reference/react/apis.md                   | 8 ++++++--
 src/content/reference/react/use.md                    | 4 +++-
 src/content/reference/react/useLayoutEffect.md        | 4 +++-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 11f787d2..7ded6711 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -51,7 +51,7 @@ During server rendering, `use(browser())` stops rendering the component and leav
 
 #### Returns {/*returns*/}
 
-`browser` returns a value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`.
+`browser` returns an opaque value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`.
 
 #### Caveats {/*caveats*/}
 
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index c48b6eb5..bb4a334e 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -274,6 +274,8 @@ This only works one level deep, and is intended to be an escape hatch. Don’t o
 
 ---
 
+{/* TODO: Remove this subsection when browser is available in Stable. */}
+
 ### Handling different client and server content {/*handling-different-client-and-server-content*/}
 
 If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect):
@@ -319,6 +321,10 @@ export default function App() {
 
 This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
 
+Use this approach when you want the client-rendered content to be different from the initial server-rendered HTML.
+
+<Canary>If a component should render only in the browser, call [`use(browser())`](/reference/react/use#use-browser) instead of waiting for an Effect.</Canary>
+
 <Pitfall>
 
 This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may also feel jarring to the user.
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 51438ad9..892f47bf 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -25,13 +25,17 @@ In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react
 
 *Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
 
-To read a value from a resource, use this API:
+You can pass these types of resources to [`use`](/reference/react/use):
+
+* A [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to read its resolved value.
+* A [context](/learn/passing-data-deeply-with-context) to read its value.
+* <CanaryBadge /> The value returned by [`browser`](/reference/react-dom/browser) to mark a component as browser-only during server rendering.
 
-* [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
 ```js
 function MessageComponent({ messagePromise }) {
   const message = use(messagePromise);
   const theme = use(ThemeContext);
+  use(browser());
   // ...
 }
 ```
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index bd58401e..a3bce6fd 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -4,7 +4,7 @@ title: use
 
 <Intro>
 
-`use` is a React API that lets you read the value of a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+`use` is a React API that lets you read a resource during rendering, such as a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
 
 ```js
 const value = use(resource);
@@ -1326,6 +1326,8 @@ async function getData(url) {
 
 ---
 
+## Usage (Browser) {/*usage-browser*/}
+
 ### <CanaryBadge /> Rendering a component only in the browser {/*rendering-a-component-only-in-the-browser*/}
 
 Pass the value returned by [`browser`](/reference/react-dom/browser) to `use` inside a component that should only render in the browser.
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 79263b8e..84f9bc9e 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -734,7 +734,9 @@ However, if you're running into this problem, you have a few different options:
 
 - Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs).
 
-- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
+- <CanaryBadge /> Alternatively, call [`use(browser())`](/reference/react/use#use-browser) to mark the component as browser-only. React will replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
+
+- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest `<Suspense>` boundary with a loading fallback during server rendering.
 
 - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? <RealContent /> : <FallbackContent />`. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls.
 

From b37434585de51d6cd708ebdc8137e4f087b1042a Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Thu, 20 Aug 2026 16:34:43 +0200
Subject: [PATCH 5/7] Fix stream demos on iOS Safari (#8613)

---
 src/content/reference/react-dom/browser.md    | 12 ++++++++--
 .../reference/react-dom/server/resume.md      | 14 ++++++++---
 src/content/reference/react/Suspense.md       | 24 +++++++++++++++----
 src/content/reference/react/use.md            | 12 ++++++++--
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 7ded6711..88d38128 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -136,9 +136,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```
diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index 4feb20d5..52bc12ac 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -202,10 +202,18 @@ main(document.getElementById("container"));
 export async function flushReadableStreamToFrame(readable, frame) {
   const document = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    const partialHTML = decoder.decode(chunk);
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    const partialHTML = decoder.decode(value, {stream: true});
     document.write(partialHTML);
   }
+
+  document.write(decoder.decode());
 }
 
 // This doesn't need to be an error.
@@ -234,4 +242,4 @@ export function sleep(timeoutMS) {
 ### Further reading {/*further-reading*/}
 
 Resuming behaves like `renderToReadableStream`. For more examples, check out the [usage section of `renderToReadableStream`](/reference/react-dom/server/renderToReadableStream#usage).
-The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically.
\ No newline at end of file
+The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 7a2d161e..debd74ce 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -472,9 +472,17 @@ document.getElementById('render').addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```
@@ -2445,9 +2453,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index a3bce6fd..d189d657 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -1399,9 +1399,17 @@ renderButton.addEventListener('click', () => {
 export async function flushReadableStreamToFrame(readable, frame) {
   const doc = frame.contentWindow.document;
   const decoder = new TextDecoder();
-  for await (const chunk of readable) {
-    doc.write(decoder.decode(chunk, { stream: true }));
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
   }
+
+  doc.write(decoder.decode());
   doc.close();
 }
 ```

From 0d290129ef1d44a744ff55f9df00a958d7068615 Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Thu, 20 Aug 2026 21:10:11 +0200
Subject: [PATCH 6/7] Pin matching React Canary versions in Sandpack demos
 (#8614)

* Pin matching React Canary versions in Sandpack demos

* Use cached Canary build in Sandpack demos
---
 ...labs-view-transitions-activity-and-more.md | 44 +++++++++----------
 src/content/reference/react-dom/browser.md    |  4 +-
 src/content/reference/react/Fragment.md       | 20 ++++-----
 src/content/reference/react/Suspense.md       | 20 ++++-----
 src/content/reference/react/ViewTransition.md | 44 +++++++++----------
 src/content/reference/react/use.md            |  4 +-
 6 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index dbd673a2..95821fc4 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -1245,8 +1245,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -2442,8 +2442,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -3670,8 +3670,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -4879,8 +4879,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -6195,8 +6195,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -7493,8 +7493,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -8814,8 +8814,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -10155,8 +10155,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -11441,8 +11441,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -12840,8 +12840,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -14178,8 +14178,8 @@ root.render(
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 88d38128..382bc50b 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -177,8 +177,8 @@ iframe {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index 14a534bb..cd476daf 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -511,8 +511,8 @@ export default function App() {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -620,8 +620,8 @@ label {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -716,8 +716,8 @@ p {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -828,8 +828,8 @@ export default function Card({ title }) {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1018,8 +1018,8 @@ export default function Card({ title, className }) {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index debd74ce..b4f02633 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2494,8 +2494,8 @@ iframe {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {
@@ -2859,8 +2859,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -3017,8 +3017,8 @@ hr {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -3150,8 +3150,8 @@ hr {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -3367,8 +3367,8 @@ hr {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 212062a6..79b66d80 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -436,8 +436,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -576,8 +576,8 @@ function Counter() {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -800,8 +800,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1034,8 +1034,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1235,8 +1235,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1497,8 +1497,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1728,8 +1728,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -1974,8 +1974,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -2303,8 +2303,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -2529,8 +2529,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
@@ -2774,8 +2774,8 @@ button:hover {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   }
 }
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index d189d657..9dfbc6ad 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -1440,8 +1440,8 @@ iframe {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "canary",
-    "react-dom": "canary",
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
     "react-scripts": "latest"
   },
   "scripts": {

From 12d692da47e77cdc558b928fcfbaf4e71c6d0cec Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Thu, 20 Aug 2026 22:35:24 +0200
Subject: [PATCH 7/7] Improve the browser-only rendering example (#8616)

* Improve browser-only rendering example

* Clarify browser-only example action

* Show browser-only fallback on reload
---
 src/content/reference/react-dom/browser.md | 85 ++++++++++++++--------
 src/content/reference/react/Suspense.md    | 65 +++++++++++------
 src/content/reference/react/use.md         | 65 +++++++++++------
 3 files changed, 140 insertions(+), 75 deletions(-)

diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 382bc50b..017da34e 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -69,24 +69,47 @@ Call `browser` inside `use` in a component that should only render in the browse
 
 You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering.
 
-Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
 
 <Sandpack>
 
 ```js src/App.js active
-import { Suspense, use } from 'react';
+import { Suspense, use, useState } from 'react';
 import { browser } from 'react-dom';
 
-function BrowserOnlyEditor() {
-  use(browser('The editor requires browser APIs.'));
-  return <label>Draft: <input /></label>;
+function SavedDraft() {
+  use(browser('The draft is stored in localStorage.'));
+  const [draft, setDraft] = useState(
+    () => localStorage.getItem('draft') ?? ''
+  );
+
+  function handleChange(event) {
+    const nextDraft = event.target.value;
+    setDraft(nextDraft);
+    localStorage.setItem('draft', nextDraft);
+  }
+
+  return (
+    <label>
+      Draft:
+      <textarea
+        value={draft}
+        onChange={handleChange}
+        rows={4}
+        cols={30}
+      />
+    </label>
+  );
 }
 
 export default function App() {
   return (
-    <Suspense fallback={<p>Loading editor...</p>}>
-      <BrowserOnlyEditor />
-    </Suspense>
+    <>
+      <h1>Saved draft</h1>
+      <Suspense fallback={<p>Loading draft...</p>}>
+        <SavedDraft />
+      </Suspense>
+    </>
   );
 }
 ```
@@ -98,10 +121,14 @@ export default function Document() {
   return (
     <html lang="en">
       <head>
-        <title>Article editor</title>
+        <title>Saved draft</title>
+        <style>{`
+          h1 { font-size: 24px; margin-top: 0; }
+          label, textarea { display: block; }
+          textarea { margin-top: 5px; }
+        `}</style>
       </head>
       <body>
-        <h1>Article editor</h1>
         <App />
       </body>
     </html>
@@ -109,7 +136,7 @@ export default function Document() {
 }
 ```
 
-```js src/index.js
+```js src/index.js hidden
 import { hydrateRoot } from 'react-dom/client';
 import { renderToReadableStream } from 'react-dom/server';
 import Document from './Document.js';
@@ -125,11 +152,7 @@ async function main(frame) {
   hydrateRoot(frame.contentDocument, <Document />);
 }
 
-const renderButton = document.getElementById('render');
-renderButton.addEventListener('click', () => {
-  renderButton.disabled = true;
-  main(document.getElementById('preview'));
-}, { once: true });
+main(document.getElementById('preview'));
 ```
 
 ```js src/demo-helpers.js hidden
@@ -151,7 +174,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
 }
 ```
 
-```html public/index.html
+```html public/index.html hidden
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -159,8 +182,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
   <title>Browser-only rendering</title>
 </head>
 <body>
-  <button id="render">Render the page</button>
-  <br /><br />
   <iframe id="preview" title="Rendered page"></iframe>
 </body>
 </html>
@@ -169,8 +190,8 @@ export async function flushReadableStreamToFrame(readable, frame) {
 ```css src/styles.css hidden
 iframe {
   width: 100%;
-  height: 180px;
-  border: 1px solid #aaa;
+  height: 160px;
+  border: 0;
 }
 ```
 
@@ -199,12 +220,13 @@ In a React Server Components app, `use(browser())` must be called from a Client
 ```js {1}
 'use client';
 
-import { use } from 'react';
+import { use, useState } from 'react';
 import { browser } from 'react-dom';
 
-export default function BrowserOnlyEditor() {
-  use(browser('The editor requires browser APIs.'));
-  return <Editor />;
+export default function SavedDraft() {
+  use(browser('The saved draft is stored in localStorage.'));
+  const [draft] = useState(() => localStorage.getItem('draft') ?? '');
+  return <DraftEditor initialDraft={draft} />;
 }
 ```
 
@@ -243,18 +265,19 @@ On the server, `useBrowserQuery` calls `useQuery` only when `initialData` is ava
 Pass an `onBrowserBailout` callback to the server renderer to report browser-only rendering. When React leaves a Suspense fallback for the browser, it does not call the server renderer's `onError` callback or [`hydrateRoot`'s `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) callback. This example also passes a reason, which is available as the reported error's `cause`:
 
 ```js
-import { Suspense, use } from 'react';
+import { Suspense, use, useState } from 'react';
 import { browser } from 'react-dom';
 import { renderToPipeableStream } from 'react-dom/server';
 
-function BrowserOnlyEditor() {
-  use(browser(() => new Error('The editor requires a browser API.')));
-  return <Editor />;
+function SavedDraft() {
+  use(browser(() => new Error('The saved draft is stored in localStorage.')));
+  const [draft] = useState(() => localStorage.getItem('draft') ?? '');
+  return <DraftEditor initialDraft={draft} />;
 }
 
 const { pipe } = renderToPipeableStream(
-  <Suspense fallback={<p>Loading editor...</p>}>
-    <BrowserOnlyEditor />
+  <Suspense fallback={<p>Loading saved draft...</p>}>
+    <SavedDraft />
   </Suspense>,
   {
     onShellReady() {
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index b4f02633..ec62d242 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2386,24 +2386,47 @@ The server HTML will include the loading indicator. It will be replaced by the `
 
 A Suspense boundary can provide a fallback for a browser-only component. Wrap the component in `<Suspense>` and call [`use(browser())`](/reference/react/use#use-browser) inside it.
 
-Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
 
 <Sandpack>
 
 ```js src/App.js active
-import { Suspense, use } from 'react';
+import { Suspense, use, useState } from 'react';
 import { browser } from 'react-dom';
 
-function BrowserOnlyEditor() {
-  use(browser('The editor requires browser APIs.'));
-  return <label>Draft: <input /></label>;
+function SavedDraft() {
+  use(browser('The draft is stored in localStorage.'));
+  const [draft, setDraft] = useState(
+    () => localStorage.getItem('draft') ?? ''
+  );
+
+  function handleChange(event) {
+    const nextDraft = event.target.value;
+    setDraft(nextDraft);
+    localStorage.setItem('draft', nextDraft);
+  }
+
+  return (
+    <label>
+      Draft:
+      <textarea
+        value={draft}
+        onChange={handleChange}
+        rows={4}
+        cols={30}
+      />
+    </label>
+  );
 }
 
 export default function App() {
   return (
-    <Suspense fallback={<p>Loading editor...</p>}>
-      <BrowserOnlyEditor />
-    </Suspense>
+    <>
+      <h1>Saved draft</h1>
+      <Suspense fallback={<p>Loading draft...</p>}>
+        <SavedDraft />
+      </Suspense>
+    </>
   );
 }
 ```
@@ -2415,10 +2438,14 @@ export default function Document() {
   return (
     <html lang="en">
       <head>
-        <title>Article editor</title>
+        <title>Saved draft</title>
+        <style>{`
+          h1 { font-size: 24px; margin-top: 0; }
+          label, textarea { display: block; }
+          textarea { margin-top: 5px; }
+        `}</style>
       </head>
       <body>
-        <h1>Article editor</h1>
         <App />
       </body>
     </html>
@@ -2426,7 +2453,7 @@ export default function Document() {
 }
 ```
 
-```js src/index.js
+```js src/index.js hidden
 import { hydrateRoot } from 'react-dom/client';
 import { renderToReadableStream } from 'react-dom/server';
 import Document from './Document.js';
@@ -2442,11 +2469,7 @@ async function main(frame) {
   hydrateRoot(frame.contentDocument, <Document />);
 }
 
-const renderButton = document.getElementById('render');
-renderButton.addEventListener('click', () => {
-  renderButton.disabled = true;
-  main(document.getElementById('preview'));
-}, { once: true });
+main(document.getElementById('preview'));
 ```
 
 ```js src/demo-helpers.js hidden
@@ -2468,7 +2491,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
 }
 ```
 
-```html public/index.html
+```html public/index.html hidden
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -2476,8 +2499,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
   <title>Browser-only rendering</title>
 </head>
 <body>
-  <button id="render">Render the page</button>
-  <br /><br />
   <iframe id="preview" title="Rendered page"></iframe>
 </body>
 </html>
@@ -2486,8 +2507,8 @@ export async function flushReadableStreamToFrame(readable, frame) {
 ```css src/styles.css hidden
 iframe {
   width: 100%;
-  height: 180px;
-  border: 1px solid #aaa;
+  height: 160px;
+  border: 0;
 }
 ```
 
@@ -2509,7 +2530,7 @@ iframe {
 
 </Sandpack>
 
-During server rendering, React includes the Suspense boundary's fallback in the HTML. In the browser, React replaces the fallback with the editor.
+During server rendering, React includes the Suspense boundary's fallback in the HTML. In the browser, React replaces the fallback with the saved draft.
 
 ---
 
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 9dfbc6ad..26dd8f83 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -1332,24 +1332,47 @@ async function getData(url) {
 
 Pass the value returned by [`browser`](/reference/react-dom/browser) to `use` inside a component that should only render in the browser.
 
-Press **Render the page**. The loading fallback appears first. After a short delay, React hydrates the page and displays the browser-only editor.
+Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
 
 <Sandpack>
 
 ```js src/App.js active
-import { Suspense, use } from 'react';
+import { Suspense, use, useState } from 'react';
 import { browser } from 'react-dom';
 
-function BrowserOnlyEditor() {
-  use(browser('The editor requires browser APIs.'));
-  return <label>Draft: <input /></label>;
+function SavedDraft() {
+  use(browser('The draft is stored in localStorage.'));
+  const [draft, setDraft] = useState(
+    () => localStorage.getItem('draft') ?? ''
+  );
+
+  function handleChange(event) {
+    const nextDraft = event.target.value;
+    setDraft(nextDraft);
+    localStorage.setItem('draft', nextDraft);
+  }
+
+  return (
+    <label>
+      Draft:
+      <textarea
+        value={draft}
+        onChange={handleChange}
+        rows={4}
+        cols={30}
+      />
+    </label>
+  );
 }
 
 export default function App() {
   return (
-    <Suspense fallback={<p>Loading editor...</p>}>
-      <BrowserOnlyEditor />
-    </Suspense>
+    <>
+      <h1>Saved draft</h1>
+      <Suspense fallback={<p>Loading draft...</p>}>
+        <SavedDraft />
+      </Suspense>
+    </>
   );
 }
 ```
@@ -1361,10 +1384,14 @@ export default function Document() {
   return (
     <html lang="en">
       <head>
-        <title>Article editor</title>
+        <title>Saved draft</title>
+        <style>{`
+          h1 { font-size: 24px; margin-top: 0; }
+          label, textarea { display: block; }
+          textarea { margin-top: 5px; }
+        `}</style>
       </head>
       <body>
-        <h1>Article editor</h1>
         <App />
       </body>
     </html>
@@ -1372,7 +1399,7 @@ export default function Document() {
 }
 ```
 
-```js src/index.js
+```js src/index.js hidden
 import { hydrateRoot } from 'react-dom/client';
 import { renderToReadableStream } from 'react-dom/server';
 import Document from './Document.js';
@@ -1388,11 +1415,7 @@ async function main(frame) {
   hydrateRoot(frame.contentDocument, <Document />);
 }
 
-const renderButton = document.getElementById('render');
-renderButton.addEventListener('click', () => {
-  renderButton.disabled = true;
-  main(document.getElementById('preview'));
-}, { once: true });
+main(document.getElementById('preview'));
 ```
 
 ```js src/demo-helpers.js hidden
@@ -1414,7 +1437,7 @@ export async function flushReadableStreamToFrame(readable, frame) {
 }
 ```
 
-```html public/index.html
+```html public/index.html hidden
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1422,8 +1445,6 @@ export async function flushReadableStreamToFrame(readable, frame) {
   <title>Browser-only rendering</title>
 </head>
 <body>
-  <button id="render">Render the page</button>
-  <br /><br />
   <iframe id="preview" title="Rendered page"></iframe>
 </body>
 </html>
@@ -1432,8 +1453,8 @@ export async function flushReadableStreamToFrame(readable, frame) {
 ```css src/styles.css hidden
 iframe {
   width: 100%;
-  height: 180px;
-  border: 1px solid #aaa;
+  height: 160px;
+  border: 0;
 }
 ```
 
@@ -1455,7 +1476,7 @@ iframe {
 
 </Sandpack>
 
-During server rendering, `use(browser())` suspends the component and React includes the closest Suspense boundary's fallback in the HTML. In the browser, `use(browser())` returns `undefined` and the editor renders normally.
+During server rendering, `use(browser())` suspends the component and React includes the closest Suspense boundary's fallback in the HTML. In the browser, `use(browser())` returns `undefined` and the saved draft renders normally.
 
 ---