From 7c36f7ac329fe3cf2e11222edce9a535158c2cab Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 24 Aug 2026 19:33:57 +0200 Subject: [PATCH 01/15] fix my entry on the team page, typo fixes (#8624) --- src/content/community/team.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/community/team.md b/src/content/community/team.md index dd77a539e..4e307463d 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -42,6 +42,8 @@ React work is organized into working groups, each responsible for an area of the + + @@ -77,7 +79,7 @@ React work is organized into working groups, each responsible for an area of the - Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. + Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on JavaScript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. @@ -102,8 +104,6 @@ React work is organized into working groups, each responsible for an area of the - - ## Advisors {/*advisors*/} @@ -115,7 +115,7 @@ React work is organized into working groups, each responsible for an area of the - Like many others, Jimmy started programming with the hopes of being able to work in the gaming industry. Fast forward a few years, he somehow decided that React and Javascript were pretty fun and that helping other developers build fast experiences was a more interesting life goal. After starting his career at Meta, working on product infrastructure and (briefly) on React Native, Jimmy now works at Vercel, where he helps his team build Next.js. He sadly does not get much time for video games anymore. + Like many others, Jimmy started programming with the hopes of being able to work in the gaming industry. Fast forward a few years, he somehow decided that React and JavaScript were pretty fun and that helping other developers build fast experiences was a more interesting life goal. After starting his career at Meta, working on product infrastructure and (briefly) on React Native, Jimmy now works at Vercel, where he helps his team build Next.js. He sadly does not get much time for video games anymore. From 24618e2ac310ef03b86e60c858a8dbe55869965d Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Tue, 1 Sep 2026 00:28:34 +0200 Subject: [PATCH 02/15] Add a conditional browser query example (#8617) * Add conditional browser query example * Move browser query hook into its own example file * Use IndexedDB in conditional browser example * Clarify conditional browser rendering example * Polish browser rendering examples * Bridge conditional browser examples * Tighten conditional browser example intro * Use time zone for conditional browser example * Clarify conditional example transition * Lead conditional browser docs with time zone example * Address conditional browser rendering feedback * update * Clarify conditional browser control flow * Clarify conditional data fetching pattern * Clarify conditional rendering outcomes * Polish conditional browser examples * Clarify conditional query rendering * Align conditional browser guidance --- src/content/reference/react-dom/browser.md | 177 +++++++++++++++++++-- 1 file changed, 162 insertions(+), 15 deletions(-) diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md index 017da34e7..98fa2d465 100644 --- a/src/content/reference/react-dom/browser.md +++ b/src/content/reference/react-dom/browser.md @@ -234,9 +234,153 @@ export default function SavedDraft() { --- -### Conditionally rendering in the browser {/*conditionally-rendering-in-the-browser*/} +### Conditionally rendering on the server {/*conditionally-rendering-on-the-server*/} -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: +Like other calls to [`use`](/reference/react/use), `use(browser())` can be called inside a conditional statement or after an early return. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop. + +For example, this `useTimeZone` Hook accepts an optional default value. When provided, React renders the default value in the initial HTML and in the browser. Without a default value, the Component suspends during server rendering and shows the device's local time zone in the browser. + +Click **Reload** to see the loading fallback before the user's time zone appears. + + + +```js src/App.js +import { Suspense } from 'react'; +import { useTimeZone } from './useTimeZone.js'; + +function TimeZone({label, defaultTimeZone}) { + const timeZone = useTimeZone(defaultTimeZone); + return

{label}: {timeZone}

; +} + +export default function App() { + return ( + <> +

Event details

+ + Loading your time zone...

}> + +
+ + ); +} +``` + +```js src/useTimeZone.js active +import { use } from 'react'; +import { browser } from 'react-dom'; + +export function useTimeZone(defaultTimeZone) { + if (defaultTimeZone !== undefined) { + return defaultTimeZone; + } + + use(browser('No default time zone was provided.')); + return Intl.DateTimeFormat().resolvedOptions().timeZone; +} +``` + +```js src/Document.js hidden +import App from './App.js'; + +export default function Document() { + return ( + + + Event details + + + + + + + ); +} +``` + +```js src/index.js hidden +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(); + await flushReadableStreamToFrame(stream, frame); + + // Wait so both the fallback and hydrated content are visible. + await new Promise(resolve => setTimeout(resolve, 1200)); + hydrateRoot(frame.contentDocument, ); +} + +main(document.getElementById('preview')); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + 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(); +} +``` + +```html public/index.html hidden + + + + + Conditional browser rendering + + + + + +``` + +```css src/styles.css hidden +iframe { + width: 100%; + height: 240px; + border: 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +
+ +You can apply a similar pattern to conditionally avoid server rendering when using a Suspense-enabled data-fetching library: ```js {3} function useBrowserQuery(query, options) { @@ -256,7 +400,7 @@ function ProductDetails({ productId, initialData }) { } ``` -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. +With `initialData`, React renders the Component to HTML on the server. Without it, React leaves the closest [``](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `useQuery` can fetch the data or read it from its client cache as usual. --- @@ -275,19 +419,22 @@ function SavedDraft() { return ; } -const { pipe } = renderToPipeableStream( - Loading saved draft...

}> - -
, - { - onShellReady() { - pipe(response); - }, - onBrowserBailout(error, errorInfo) { - logBrowserBailout(error, errorInfo); - } +function App() { + return ( + Loading saved draft...

}> + +
+ ); +} + +const { pipe } = renderToPipeableStream(, { + onShellReady() { + pipe(response); + }, + onBrowserBailout(error, errorInfo) { + logBrowserBailout(error, errorInfo); } -); +}); ``` `onBrowserBailout` receives two arguments: From f3d9794fc31f4a3faf7e863984d37f4ae86b3290 Mon Sep 17 00:00:00 2001 From: "Sebastian \"Sebbie\" Silbermann" Date: Thu, 3 Sep 2026 10:11:11 +0200 Subject: [PATCH 03/15] Document missing react-dom server rendering and hydration options (#8632) * Document missing Fizz server rendering options and fix resume references This adds the `formState`, `importMap`, `onHeaders`, and `maxHeadersLength` options to the `renderToPipeableStream` and `renderToReadableStream` reference pages, documents the object form of `nonce` for separate script and style nonces, and adds `importMap`, `onHeaders`, and `maxHeadersLength` to the `prerender` and `prerenderToNodeStream` pages. All of these options are supported in stable releases but were never documented. The `resumeAndPrerender` entries on the `react-dom/static` index were marked as experimental-only even though they ship in stable releases, so the badge is removed, and the `resumeAndPrerender` intro destructured a `postpone` property that is actually called `postponed`. The `resumeToPipeableStream` page no longer documents a `signal` option because the Node.js implementation neither types nor reads it, and it now documents the `onAllReady` callback that the implementation does support. The same page referred to `resume` in its intro and Returns section where it meant `resumeToPipeableStream`, and the `react-dom/server` index linked both resume entries to the `renderToPipeableStream` page; they now point at their own pages. Co-Authored-By: Claude Code (kimi-k3[1m]) * Document the formState option for hydrateRoot This adds the `formState` option to the `hydrateRoot` reference. The option carries the form state produced by a Server Function form submission so that `useActionState` with a `permalink` returns the submitted state during hydration instead of the initial state, and it must match the `formState` passed to the server renderer. The option shipped in React 19.0 but was never documented. --------- Co-authored-by: Claude Code (kimi-k3[1m]) --- src/content/reference/react-dom/client/hydrateRoot.md | 1 + src/content/reference/react-dom/server/index.md | 4 ++-- .../reference/react-dom/server/renderToPipeableStream.md | 6 +++++- .../reference/react-dom/server/renderToReadableStream.md | 6 +++++- .../reference/react-dom/server/resumeToPipeableStream.md | 8 ++++---- src/content/reference/react-dom/static/index.md | 4 ++-- src/content/reference/react-dom/static/prerender.md | 3 +++ .../reference/react-dom/static/prerenderToNodeStream.md | 3 +++ .../reference/react-dom/static/resumeAndPrerender.md | 2 +- 9 files changed, 26 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index bb4a334eb..e49faff1b 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -45,6 +45,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. * **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 used on the server. + * **optional** `formState`: The form state from a form submission handled by a [Server Function](/reference/rsc/server-functions). If the page was rendered on the server in response to a submission of a form that uses [`useActionState`](/reference/react/useActionState) with a `permalink`, pass the resulting form state so that `useActionState` returns the submitted state instead of the `initialState`. Must be the same value as the `formState` passed to the [server renderer.](/reference/react-dom/server/renderToPipeableStream#parameters) This is typically passed through by your framework. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index 1856acd71..aa5d37090 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -15,7 +15,7 @@ The `react-dom/server` APIs let you server-side render React components to HTML. These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes: * [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) -* [`resume`](/reference/react-dom/server/renderToPipeableStream) resumes [`prerender`](/reference/react-dom/static/prerender) to a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). +* [`resume`](/reference/react-dom/server/resume) resumes [`prerender`](/reference/react-dom/static/prerender) to a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). @@ -30,7 +30,7 @@ Node.js also includes these methods for compatibility, but they are not recommen These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html) * [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) -* [`resumeToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) resumes [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +* [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) resumes [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) --- diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 5d48c6a66..7535ebeac 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -52,12 +52,16 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `