+
+ );
+}
+```
+
+```js
+import { ViewTransition, useState, startTransition } from 'react';
+import { Video } from './Video';
+import videos from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import {
+ ViewTransition,
+ addTransitionType,
+ useState,
+ startTransition,
+ Fragment
+} from 'react';
+import { Video } from './Video';
+import videos from './data';
+import './animations.css';
+
+export default function Component() {
+ const [selected, setSelected] = useState(0)
+ const video = videos[selected];
+
+ return (
+ <>
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+
+
+
+
+
+ );
+}
+
+export function VideoPlaceholder() {
+ const video = {image: 'loading'};
+ return (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import { Suspense, useState, startTransition, use, ViewTransition } from 'react';
+import { Video, VideoPlaceholder } from './Video';
+import { fetchVideo } from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+
+
+
+
+ );
+}
+
+export function VideoPlaceholder() {
+ const video = {image: 'loading'};
+ return (
+
+
+
+
+ {video.title}
+ {video.description}
+
+
+ );
+}
+```
+
+```js
+import { Suspense, useState, startTransition, use, ViewTransition } from 'react';
+import { Video, VideoPlaceholder } from './Video';
+import { fetchVideo } from './data';
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+
+ return (
+ <>
+
+
+ {showItem && (
+
+
+
+
+
+
+ + +
+ 
+
+
+ );
+}
+
+export function ProfileCardLoading() {
+ return (
+
+
+ Jack Pope
+{quote}
+
+
+
+ );
+}
+```
+
+
+```js src/VanillaProfileCard.js
+import { useRef } from 'react';
+import { fetchQuote } from './data.js';
+import { freshStylesheetUrl, freshImageUrl } from './resources.js';
+
+export function VanillaProfileCard() {
+ const ref = useRef(null);
+ async function show() {
+ const quote = await fetchQuote();
+ const doc = ref.current.contentWindow.document;
+ doc.open();
+ doc.write(`
+
+
+
+ +
+
+ })
+
+
+ `);
+ doc.close();
+ }
+ return (
+ <>
+
+
+
+ );
+}
+```
+
+```js src/resources.js hidden
+// Add a unique parameter so the resources aren't cached,
+// and every run shows the loading state.
+export function freshStylesheetUrl() {
+ return (
+ 'https://fonts.googleapis.com/css2?family=Caveat&display=swap' +
+ '&t=' +
+ Date.now()
+ );
+}
+
+export function freshImageUrl() {
+ return 'https://react.dev/images/team/jack-pope.jpg?t=' + Date.now();
+}
+```
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+
+export async function fetchQuote() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise((resolve) => {
+ setTimeout(resolve, 250);
+ });
+ return 'The best way to predict the future is to invent it.';
+}
+```
+
+```css
+#root {
+ min-height: 320px;
+}
+button {
+ margin-right: 8px;
+}
+hr {
+ margin: 16px 0;
+}
+img {
+ object-fit: cover;
+}
+.profile-card {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ margin-top: 1em;
+}
+.profile-card img {
+ border-radius: 50%;
+ background: #dfe3e9;
+}
+.name {
+ margin: 0 0 4px;
+ font-family: 'Caveat', sans-serif;
+ font-size: 22px;
+ line-height: 28px;
+ font-weight: bold;
+}
+.bio {
+ margin: 0;
+ font-family: 'Caveat', sans-serif;
+ font-size: 20px;
+ line-height: 26px;
+}
+.profile-card img {
+ display: block;
+}
+.avatar-placeholder {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: #dfe3e9;
+}
+.name-placeholder,
+.bio-placeholder {
+ border-radius: 4px;
+ background: #dfe3e9;
+ color: transparent;
+}
+.name-placeholder {
+ width: 90px;
+}
+.bio-placeholder {
+ width: 220px;
+}
+.vanilla-frame {
+ display: block;
+ margin-top: 1em;
+ border: none;
+ width: 100%;
+ height: 110px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+ Jack Pope
+${quote}
+` just to hold a ref sometimes works, but it can also interfere with your component's styling or layout. Moreover, if a component doesn't expose a `ref` prop, you would need to modify that component to do so, which might be impossible if it comes from a library you don't control.
+
+Fragment Refs solve these problems by providing a limited set of commonly used DOM methods that work with any React component, regardless of what it renders.
+
+In 19.3, you can use them by passing a ref directly to a [``](/reference/react/Fragment). This ref gives you a `FragmentInstance`, which you can use to work with the Fragment's DOM children:
+
+```js {2,5-6,10}
+function Component() {
+ const fragmentRef = useRef(null);
+
+ useEffect(() => {
+ const fragmentInstance = fragmentRef.current;
+ fragmentInstance.focus();
+ }, []);
+
+ return (
+
+ {posts.map(post => (
+
+ {post.title}
+
+ ))}
+
+ )
+}
+```
+
+The `FragmentInstance` operates on the children's DOM _as a group_, without changing its structure:
+
+- `addEventListener`, `removeEventListener`, and `dispatchEvent` manage events for first-level children.
+- `focus`, `focusLast`, and `blur` move focus across nested children, depth-first.
+- `observeUsing` and `unobserveUsing` connect an `IntersectionObserver` or `ResizeObserver`.
+- `getClientRects`, `getRootNode`, `compareDocumentPosition`, and `scrollIntoView` let you measure and scroll to the fragment's first-level children.
+
+Thus, Fragment Refs let you attach behavior to other components without requiring you to modify those component's internals, or without changing the DOM structure that they already produce.
+
+This example shows an `InView` component with an `onChange` prop that fires whenever its children enter or exit the viewport:
+
+
+
+```js src/App.js active
+import { useState } from 'react';
+import Card from './Card';
+import InView from './InView';
+
+export default function App() {
+ const [isVisible, setIsVisible] = useState(true);
+
+ return (
+
+ {children}
+
+ );
+}
+```
+
+```css
+.page {
+ transition: background 0.3s;
+}
+
+.page.visible {
+ background: #d4edda;
+}
+
+.filler {
+ height: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #aaa;
+ font-size: 14px;
+}
+
+.card {
+ padding: 16px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin: 8px 16px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+ font-weight: 600;
+ font-size: 14px;
+}
+```
+
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Notice how `InView` is able to add behavior to its children, even though there's no single parent DOM element, and in spite of `Card` not exposing a `ref` prop.
+
+To learn more about working with Fragment Refs, see the [`` docs](/reference/react/Fragment).
+
+---
+
+## New React DOM Features {/*new-react-dom-features*/}
+
+### `browser` {/*browser*/}
+
+If your app uses server rendering, your components will render in two different environments:
+
+- On the server, components render to produce the initial HTML
+- On the client, components render to enrich that HTML with event handlers
+
+Most of time, your components should be able to produce HTML that matches their initial client-rendered output, ensuring they hydrate correctly while still letting users see as much content as possible on the initial load.
+
+But in rare cases, a component may not be able to produce meaningful UI on the server. For example, it might depend on a browser-only API like `localStorage`, or it might read from the browser's local timezone. In these cases, you may want to opt that component out of server rendering altogether.
+
+Previously, you might do this using some state that you'd update in an effect, or by checking for the presence of browser APIs like `window`:
+
+```js
+function Component() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ // ...
+}
+
+function Component() {
+ const isBrowser = typeof window !== 'undefined';
+
+ // ...
+}
+```
+
+In 19.3, React now includes a first-class API for this technique.
+
+A component can call `use(browser())` to opt out of server-side rendering:
+
+```js {5}
+import { use } from 'react';
+import { browser } from 'react-dom';
+
+function Component() {
+ use(browser());
+
+ // ...
+}
+```
+
+This will trigger Suspense on the server, but _not_ in the client. During server-side rendering, the nearest Suspense boundary's fallback will show in the HTML. Once the component is hydrated on the client, `use(browser())` does not suspend, allowing the component to continue rendering as normal.
+
+Here's an example of a component that renders the local time zone from your device. Press **Reload** to see the initial HTML followed by React's first render on the client:
+
+
+
+```js
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function TimeZone() {
+ use(browser());
+ const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+ return
+
+
+ );
+}
+```
+
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+ return (
+
+
+ Event details
+
+
+
+ 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-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Because TimeZone suspends on the server, the initial HTML includes the Suspense fallback. After a small artificial delay, React hydrates the page, allowing the component to render as normal in the browser.
+
+Thus, for components that cannot produce meaningful UI during server rendering, `browser` lets you use Suspense for their loading states, allowing them to participate with other components that suspend until they're ready to render.
+
+---
+
+Like other calls to `use`, `use(browser())` can be called inside a conditional statement or after an early return. This lets you write components or custom Hooks that can opt out of server rendering based on a condition, such as the value of a prop.
+
+Here's the same example from above, except now our TimeZone component accepts an optional default value it can render as part of the initial HTML:
+
+
+
+```js
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function TimeZone({ defaultValue }) {
+ if (defaultValue) {
+ return
+ +Event details
+
+
+
+ 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-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-scripts": "latest"
+ }
+}
+```
+
+
+
+Notice how TimeZone only suspends in the second case, when no default is provided.
+
+Another useful example of this pattern is opting a data-fetching Hook like `useQuery` out of server rendering, unless that query's initial data was passed in (for example from a Server Component or framework's loader function):
+
+```js {3}
+function useBrowserQuery(query, options) {
+ if (options.initialData === undefined) {
+ use(browser());
+ }
+
+ return useQuery(query, options);
+}
+
+function ProductDetails({ productId, initialData }) {
+ const product = useBrowserQuery(`/api/products/${productId}`, {
+ initialData,
+ });
+
+ return ` can be rendered directly in Server Components {/*context-can-be-rendered-directly-in-server-components*/}
+
+While Server Components can't _create_ Context, they can _render_ Context by importing it from a `'use client'` module.
+
+Previously, this required the client module to export a separate wrapper component, often called a Provider:
+
+```js {7-9}
+// user-context.js
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
+
+export function UserProvider({ currentUser, children }) {
+ return {children} ;
+}
+```
+
+```js {8}
+// server-component.js
+import { UserProvider } from './user-context';
+
+export async function Layout({ children }) {
+ const currentUser = await getCurrentUser();
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Notice that in this example, the provider does nothing other than pass the prop from the Server Component directly to the Context.
+
+In React 19.3, Server Components can import and render Context directly from a `'use client'` module, without an additional wrapping component:
+
+```js {5}
+// user-context.js
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
+```
+
+```js {8}
+// server-component.js
+import { UserContext } from './user-context';
+
+export async function Layout({ children }) {
+ const currentUser = await getCurrentUser();
+
+ return (
+
+ {children}
+
+ )
+}
+```
+
+This is especially useful for Contexts that solely exist to allow Server Components to share some data with the rest of the client tree.
+
+
+---
+
+## Changelog {/*changelog*/}
+
+Other notable changes
+- `react`: Render Transitions independently instead of entangling them into a single render, so a slow Transition no longer holds up unrelated ones [#37290](https://github.com/react/react/pull/37290)
+- `react`: Add a warning when `use` is used incorrectly in a conditional [#37104](https://github.com/react/react/pull/37104)
+- `react`: Rename "form state" to "action state" in `useActionState` error messages [#35790](https://github.com/react/react/pull/35790)
+- `react-dom`: Add support for `onFullscreenChange` and `onFullscreenError` events [#34621](https://github.com/react/react/pull/34621)
+- `react-dom`: Add support for the `maskType` SVG property [#35921](https://github.com/react/react/pull/35921)
+- `react-dom`: Support `fetchPriority` for module resources [#36835](https://github.com/react/react/pull/36835)
+- `react-dom`: Fire `onReset` when React automatically resets a form after a Server Action [#35176](https://github.com/react/react/pull/35176)
+- `react-dom`: Include the `submitter` in `submit` events [#35590](https://github.com/react/react/pull/35590)
+- `react-dom`: Recognize `credentialless` as a boolean attribute on iframes [#36148](https://github.com/react/react/pull/36148)
+- `react-dom`: Batch updates from `resize` events until the next frame [#35117](https://github.com/react/react/pull/35117)
+- `react-server`: Transport `Error.cause` [#35810](https://github.com/react/react/pull/35810) and `AggregateError.errors` [#36156](https://github.com/react/react/pull/36156) to the client
+- `react-server`: Add support for `` in Flight [#34697](https://github.com/react/react/pull/34697)
+
+Notable bug fixes
+
+- `react`: Fix `useDeferredValue` getting stuck on an old value [#36134](https://github.com/react/react/pull/36134)
+- `react`: Fix context propagation into Suspense fallbacks [#36160](https://github.com/react/react/pull/36160) and through suspended Suspense boundaries [#35839](https://github.com/react/react/pull/35839)
+- `react`: Fix a hang when updating a dehydrated Suspense boundary inside a hidden tree [#37135](https://github.com/react/react/pull/37135)
+- `react`: Fix `useSyncExternalStore` missing store mutations that happened while an `` tree was hidden [#36947](https://github.com/react/react/pull/36947)
+- `react`: Fix `useEffectEvent` to read the latest values in `forwardRef` and `memo` components [#34831](https://github.com/react/react/pull/34831)
+- `react`: Fix form status resetting when component state is updated [#34075](https://github.com/react/react/pull/34075)
+- `react`: Fix several Fast Refresh bugs with `lazy`, `memo`, and edits that change a component's kind [#36965](https://github.com/react/react/pull/36965), [#36964](https://github.com/react/react/pull/36964), [#36963](https://github.com/react/react/pull/36963), [#36950](https://github.com/react/react/pull/36950)
+- `react`: Fix a bug where `` was still hoisted to `<head>` after the `<Activity>` containing the `<title>` changed mode from `visible` to `hidden` [#34983](https://github.com/react/react/pull/34983)
+- `react`: Don't let errors escape a hidden `<Activity>` [#35074](https://github.com/react/react/pull/35074)
+- `react`: Hide portal contents rendered inside a hidden `<Activity>` [#35091](https://github.com/react/react/pull/35091)
+- `react`: Don't reference the internal `<Offscreen>` type in error messages [#35763](https://github.com/react/react/pull/35763)
+- `react-dom`: Fix focus for delegated and already-focused elements [#36010](https://github.com/react/react/pull/36010)
+- `react-dom`: Fix a `FragmentInstance` listener leak by normalizing capture options per the DOM spec [#36047](https://github.com/react/react/pull/36047)
+- `react-dom`: Fix a `<ViewTransition>` crash in Mobile Safari [#35337](https://github.com/react/react/pull/35337)
+- `react-dom`: Fix a `<ViewTransition>` crash with `SuspenseList` [#35520](https://github.com/react/react/pull/35520)
+- `react-dom`: Update `defaultValue` for `type="number"` inputs to match other input types [#36980](https://github.com/react/react/pull/36980)
+- `react-dom`: Avoid setting `innerHTML` when it hasn't changed [#36949](https://github.com/react/react/pull/36949)
+- `react-dom`: Fix a false-positive hydration mismatch on `nonce` attributes [#37030](https://github.com/react/react/pull/37030)
+- `react-dom`: Fix `react-dom/server` hanging on Deno [#35235](https://github.com/react/react/pull/35235)
+- `react-server`: Fix dropped `FormData` entries in `decodeReplyFromBusboy` [#36468](https://github.com/react/react/pull/36468)
+- `react-server`: Fix a stack overflow with deep async chains [#35612](https://github.com/react/react/pull/35612) and a `RangeError` from exponential debug info growth [#37481](https://github.com/react/react/pull/37481)
+
+For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md).
+
+---
+
+_Thanks to [Sam Selikoff](https://x.com/samselikoff) for writing this post, and to [Matt Carroll](https://mattcarrollcode.com/), [Dan Abramov](https://bsky.app/profile/danabra.mov), and [Andrew Clark](https://x.com/acdlite) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index d2930feadc5..b8b83a3dc94 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
+<BlogCard title="React 19.3" date="September 9, 2026" url="/blog/2026/09/09/react-19-3">
+
+React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. In this post ...
+
+</BlogCard>
+
<BlogCard title="The React Foundation: A New Home for React Hosted by the Linux Foundation" date="February 24, 2026" url="/blog/2026/02/24/the-react-foundation">
The React Foundation has officially launched under the Linux Foundation.
diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md
index 98fa2d465c4..00c60d37d2a 100644
--- a/src/content/reference/react-dom/browser.md
+++ b/src/content/reference/react-dom/browser.md
@@ -1,18 +1,9 @@
---
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
@@ -198,8 +189,8 @@ iframe {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
},
"scripts": {
@@ -365,8 +356,8 @@ iframe {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
},
"scripts": {
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index e49faff1b69..251818bc992 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -324,7 +324,7 @@ This way the initial render pass will render the same content as the server, avo
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>
+If a component should render only in the browser, call [`use(browser())`](/reference/react/use#use-browser) instead of waiting for an Effect.
<Pitfall>
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index ff2f526af04..f81788da0e4 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -28,7 +28,7 @@ These special React props are supported for all built-in components:
* `children`: A React node (an element, a string, a number, [a portal,](/reference/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `<div><span /></div>`.
-* `dangerouslySetInnerHTML`: An object of the form `{ __html: '<p>some html</p>' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
+* `dangerouslySetInnerHTML`: An object of the form `{ __html: '<p>some html</p>' }` with a raw HTML string or [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) value inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html)
* `ref`: A ref object from [`useRef`](/reference/react/useRef) or [`createRef`](/reference/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref)
@@ -924,7 +924,7 @@ For more advanced use cases, the `ref` attribute also accepts a [callback functi
### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/}
-You can pass a raw HTML string to an element like so:
+You can pass a raw HTML string or a [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) value to an element like so:
```js
const markup = { __html: '<p>some raw html</p>' };
@@ -933,6 +933,8 @@ return <div dangerouslySetInnerHTML={markup} />;
**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+If your site enforces [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API), pass a `TrustedHTML` value created by your security policy as `__html`. React passes the value to the browser without converting it to a string, allowing the browser to validate it. Your policy must still ensure that any input used to create the value is trusted and sanitized.
+
For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this:
<Sandpack>
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index 6f1188442ab..daf8290177b 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -34,7 +34,7 @@ These APIs can be used to make apps faster by pre-loading resources such as scri
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.
+* [`browser`](/reference/react-dom/browser) lets you mark a component as browser-only during server rendering.
---
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 7535ebeacfd..c3fac16c341 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -59,7 +59,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). To use different nonces for scripts and styles, pass an object with `script` and `style` properties instead.
* **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** `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** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives an object with a `Link` property containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
* **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.
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index 9d70a13de0b..76819184c72 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -59,7 +59,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers.
* **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). To use different nonces for scripts and styles, pass an object with `script` and `style` properties instead.
- * <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** `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** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
* **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)
diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index 52bc12ac932..012d3823f90 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -48,7 +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** `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 21e3ffe1b63..f80cf23fc3f 100644
--- a/src/content/reference/react-dom/server/resumeToPipeableStream.md
+++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md
@@ -51,7 +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** `onAllReady`: A callback that fires when all rendering is complete, including both the shell and all additional content. You can call `pipe` here instead of in `onShellReady` for crawlers and static generation. 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** `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 b0747b80586..1a4258f8f90 100644
--- a/src/content/reference/react-dom/static/prerender.md
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers.
* **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers.
* **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** `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** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
* **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)
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index d7825b98dd1..52a96fef241 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -58,7 +58,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
* **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers.
* **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers.
* **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** `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** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
* **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)
diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md
index 4ea06fffc59..a0191aae3b0 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerender.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerender.md
@@ -53,7 +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** `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 309dab69d11..018fcf6d3df 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
@@ -49,7 +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** `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/Fragment.md b/src/content/reference/react/Fragment.md
index cd476daf156..8666850fc00 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -6,7 +6,7 @@ title: <Fragment> (<>...</>)
`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
-<Canary>Fragments can also accept refs, which enable interacting with underlying DOM nodes without adding wrapper elements.</Canary>
+Fragments can also accept refs, which enable interacting with underlying DOM nodes without adding wrapper elements.
```js
<>
@@ -30,7 +30,7 @@ Wrap elements in `<Fragment>` to group them together in situations where you nee
#### Props {/*props*/}
- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
-- <CanaryBadge /> **optional** `ref`: A ref object (e.g. from [`useRef`](/reference/react/useRef)) or [callback function](/reference/react-dom/components/common#ref-callback). React provides a `FragmentInstance` as the ref value that implements methods for interacting with the DOM nodes wrapped by the Fragment.
+- **optional** `ref`: A ref object (e.g. from [`useRef`](/reference/react/useRef)) or [callback function](/reference/react-dom/components/common#ref-callback). React provides a `FragmentInstance` as the ref value that implements methods for interacting with the DOM nodes wrapped by the Fragment.
#### Caveats {/*caveats*/}
@@ -38,11 +38,11 @@ Wrap elements in `<Fragment>` to group them together in situations where you nee
* React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
-* <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment ref={yourRef}>...</Fragment>`.
+* If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment ref={yourRef}>...</Fragment>`.
---
-### <CanaryBadge /> `FragmentInstance` {/*fragmentinstance*/}
+### `FragmentInstance` {/*fragmentinstance*/}
When you pass a `ref` to a Fragment, React provides a `FragmentInstance` object. It implements methods for interacting with the first-level DOM children wrapped by the Fragment.
@@ -459,7 +459,7 @@ function PostBody({ body }) {
---
-### <CanaryBadge /> Adding event listeners without a wrapper element {/*adding-event-listeners-without-wrapper*/}
+### Adding event listeners without a wrapper element {/*adding-event-listeners-without-wrapper*/}
Fragment `ref`s let you add event listeners to a group of elements without adding a wrapper DOM node. Use a [ref callback](/reference/react-dom/components/common#ref-callback) to attach and clean up listeners:
@@ -511,8 +511,8 @@ export default function App() {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -548,7 +548,7 @@ Methods like `addEventListener`, `observeUsing`, and `getClientRects` operate on
---
-### <CanaryBadge /> Managing focus across a group of elements {/*managing-focus-across-elements*/}
+### Managing focus across a group of elements {/*managing-focus-across-elements*/}
Fragment `ref`s provide `focus`, `focusLast`, and `blur` methods that operate across all DOM nodes within the Fragment:
@@ -620,8 +620,8 @@ label {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -633,7 +633,7 @@ Calling `focus()` focuses the `street` input—even though it is nested inside a
---
-### <CanaryBadge /> Scrolling a group of elements into view {/*scrolling-group-into-view*/}
+### Scrolling a group of elements into view {/*scrolling-group-into-view*/}
Use `scrollIntoView` to scroll a Fragment's children into view without a wrapper element. Pass `true` (or omit the argument) to scroll the first child to the top. Pass `false` to scroll the last child to the bottom:
@@ -716,8 +716,8 @@ p {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -727,7 +727,7 @@ p {
---
-### <CanaryBadge /> Observing visibility without a wrapper element {/*observing-visibility-without-wrapper*/}
+### Observing visibility without a wrapper element {/*observing-visibility-without-wrapper*/}
Use `observeUsing` to attach an `IntersectionObserver` to all first-level DOM children of a Fragment. This lets you track visibility without requiring child components to expose `ref`s or adding a wrapper element:
@@ -828,8 +828,8 @@ export default function Card({ title }) {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -839,7 +839,7 @@ export default function Card({ title }) {
---
-### <CanaryBadge /> Caching a global IntersectionObserver {/*caching-global-intersection-observer*/}
+### Caching a global IntersectionObserver {/*caching-global-intersection-observer*/}
A common performance optimization for sites with many observers is to share a single IntersectionObserver per config and route its entries to the correct callbacks based on which element intersected. Fragment `ref`s support this same pattern through the `reactFragments` property.
@@ -1018,8 +1018,8 @@ export default function Card({ title, className }) {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index ec62d2424de..18b20816f8f 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -47,8 +47,8 @@ A Suspense boundary waits for its content to be ready before revealing it. Any o
- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks).
- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout. [See an example below.](#waiting-for-a-stylesheet-to-load)
- Waiting for a large boundary's HTML to arrive during streaming server rendering. Sending HTML takes time, so a boundary with enough content activates even when nothing in it suspends. React reveals the content as the HTML arrives.
-- <CanaryBadge /> Loading fonts. Suspense doesn't wait for fonts by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load)
-- <CanaryBadge /> Loading images. Suspense doesn't wait for images by default, but during a [`<ViewTransition>`](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load)
+- Loading fonts. Suspense doesn't wait for fonts by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load)
+- Loading images. Suspense doesn't wait for images by default, but during a [`<ViewTransition>`](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load)
- <ExperimentalBadge /> Performing CPU-bound render work inside a [`<Suspense defer>`](#props) boundary.
<Note>
@@ -2382,7 +2382,7 @@ 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*/}
+### 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.
@@ -2515,8 +2515,8 @@ iframe {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
},
"scripts": {
@@ -2661,7 +2661,7 @@ hr {
---
-### <CanaryBadge /> Animating from Suspense content {/*animating-from-suspense-content*/}
+### Animating from Suspense content {/*animating-from-suspense-content*/}
Suspense composes with [`<ViewTransition>`](/reference/react/ViewTransition) to animate the swap from the fallback to the content. Wrap the boundary in a `<ViewTransition>`, and React treats the swap as an update, cross-fading between the fallback and the content by default:
@@ -2880,8 +2880,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -2899,7 +2899,7 @@ Where you place the `<ViewTransition>` relative to the boundary determines wheth
---
-### <CanaryBadge /> Waiting for a font to load {/*waiting-for-a-font-to-load*/}
+### Waiting for a font to load {/*waiting-for-a-font-to-load*/}
When a [`<ViewTransition>`](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits for new fonts the content introduces, up to a timeout, so the text doesn't flash with a fallback font. This only happens during a `<ViewTransition>` update.
@@ -3038,8 +3038,8 @@ hr {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -3049,7 +3049,7 @@ hr {
---
-### <CanaryBadge /> Waiting for an image to load {/*waiting-for-an-image-to-load*/}
+### Waiting for an image to load {/*waiting-for-an-image-to-load*/}
When a [`<ViewTransition>`](/reference/react/ViewTransition) animates a Suspense boundary's reveal, React waits for visible images to load, up to a timeout, so the animation doesn't start with a half-loaded image. This only happens during a `<ViewTransition>` update. Adding an `onLoad` handler opts a specific image out, even inside a `<ViewTransition>`.
@@ -3171,8 +3171,8 @@ hr {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -3182,7 +3182,7 @@ hr {
---
-### <CanaryBadge /> Coordinating fonts, images, and stylesheets {/*coordinating-fonts-images-and-stylesheets*/}
+### Coordinating fonts, images, and stylesheets {/*coordinating-fonts-images-and-stylesheets*/}
A Suspense boundary can wait for data, stylesheets, fonts, and images at once. Waiting for fonts and images only happens during a [`<ViewTransition>`](/reference/react/ViewTransition) update. In the example below, the `ProfileCard` component suspends while its data loads, and renders a stylesheet with `precedence`, text in a new font, and a portrait. React keeps the skeleton visible while the data and the stylesheet load. The `<ViewTransition>` reveal then waits for the font and the image, so the card appears complete.
@@ -3388,8 +3388,8 @@ hr {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 79b66d80957..1011a1c9623 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -1,20 +1,9 @@
---
title: <ViewTransition>
-version: canary
---
-
-
<Intro>
-<Canary>
-
-**The `<ViewTransition />` 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>
-
`<ViewTransition>` lets you animate a component tree with Transitions and Suspense.
```js
@@ -436,8 +425,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -576,8 +565,8 @@ function Counter() {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -800,8 +789,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -1034,8 +1023,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -1235,8 +1224,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -1497,8 +1486,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -1728,8 +1717,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -1974,8 +1963,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -2303,8 +2292,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -2529,8 +2518,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
@@ -2774,8 +2763,8 @@ button:hover {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
}
}
diff --git a/src/content/reference/react/addTransitionType.md b/src/content/reference/react/addTransitionType.md
index f6c6f39b265..415e7247a4f 100644
--- a/src/content/reference/react/addTransitionType.md
+++ b/src/content/reference/react/addTransitionType.md
@@ -1,16 +1,7 @@
---
title: addTransitionType
-version: canary
---
-<Canary>
-
-**The `addTransitionType` 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>
-
<Intro>
`addTransitionType` lets you specify the cause of a transition.
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 892f47bfdbb..6aa91ed0dd6 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -29,7 +29,7 @@ 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.
+* The value returned by [`browser`](/reference/react-dom/browser) to mark a component as browser-only during server rendering.
```js
function MessageComponent({ messagePromise }) {
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 26dd8f8309c..ab0db0dd8ec 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -80,7 +80,7 @@ The resolved value of the Promise.
---
-### <CanaryBadge /> `use(browser())` {/*use-browser*/}
+### `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:
@@ -1328,7 +1328,7 @@ async function getData(url) {
## Usage (Browser) {/*usage-browser*/}
-### <CanaryBadge /> Rendering a component only in the browser {/*rendering-a-component-only-in-the-browser*/}
+### 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.
@@ -1461,8 +1461,8 @@ iframe {
```json package.json hidden
{
"dependencies": {
- "react": "19.3.0-canary-eb8feb71-20260814",
- "react-dom": "19.3.0-canary-eb8feb71-20260814",
+ "react": "19.3.0-canary-f1f7ed2a-20260904",
+ "react-dom": "19.3.0-canary-f1f7ed2a-20260904",
"react-scripts": "latest"
},
"scripts": {
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 84f9bc9ef5b..df7e2e9cc7c 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -734,7 +734,7 @@ 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).
-- <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, 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.
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index cf33f7d2405..a54306e4381 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -179,6 +179,39 @@ The bundler then combines the data, rendered Server Components and dynamic Clien
Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
+### Rendering a context provider in a Server Component {/*rendering-a-context-provider-in-a-server-component*/}
+
+Server Components cannot create context, but they can render a context provider imported from a Client Component module.
+
+Create and export the context from a file with the [`'use client'`](/reference/rsc/use-client) directive:
+
+```js
+// user-context.js
+'use client';
+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
+```
+
+Then import and render the context directly from a Server Component:
+
+```js
+// server-component.js
+import { UserContext } from './user-context';
+
+export async function Layout({ children }) {
+ const currentUser = await getCurrentUser();
+
+ return (
+ <UserContext value={currentUser}>
+ {children}
+ </UserContext>
+ );
+}
+```
+
+Client Components rendered inside this provider can read its value with [`use`](/reference/react/use) or [`useContext`](/reference/react/useContext).
+
### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
diff --git a/src/content/versions.md b/src/content/versions.md
index 87c68115dc5..1b883a11a54 100644
--- a/src/content/versions.md
+++ b/src/content/versions.md
@@ -12,7 +12,7 @@ We aim to keep the docs updated within major versions, and do not publish versio
You can find an archive of previous major versions below.
-## Latest version: 19.2 {/*latest-version*/}
+## Latest version: 19.3 {/*latest-version*/}
- [react.dev](https://react.dev) {/*docs-19*/}
@@ -43,6 +43,7 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev).
- [React Compiler Beta Release](/blog/2024/10/21/react-compiler-beta-release)
- [React Compiler v1.0](/blog/2025/10/07/react-compiler-1)
- [React 19.2](/blog/2025/10/01/react-19-2)
+- [React 19.3](/blog/2026/09/09/react-19-3)
**Talks**
- [React 19 Keynote](https://www.youtube.com/watch?v=lyEKhv8-3n0)
@@ -54,6 +55,7 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev).
- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI)
**Releases**
+- [v19.3.0 (September 9, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1930-september-9-2026)
- [v19.2.7 (June, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1927-june-1-2026)
- [v19.2.6 (May, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1926-may-6-2026)
- [v19.2.5 (March, 2026)](https://github.com/react/react/blob/main/CHANGELOG.md#1925-march-18-2026)
diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json
index fd30d0e7bd5..2946180da9d 100644
--- a/src/sidebarBlog.json
+++ b/src/sidebarBlog.json
@@ -11,6 +11,13 @@
"path": "/blog",
"skipBreadcrumb": true,
"routes": [
+ {
+ "title": "React 19.3",
+ "titleForHomepage": "React 19.3",
+ "icon": "blog",
+ "date": "September 9, 2026",
+ "path": "/blog/2026/09/09/react-19-3"
+ },
{
"title": "The React Foundation: A New Home for React Hosted by the Linux Foundation",
"titleForHomepage": "The React Foundation: A New Home for React Hosted by the Linux Foundation",
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 06bb6d1cc9e..cd78ad7badc 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -114,8 +114,7 @@
},
{
"title": "<ViewTransition>",
- "path": "/reference/react/ViewTransition",
- "version": "canary"
+ "path": "/reference/react/ViewTransition"
}
]
},
@@ -129,8 +128,7 @@
},
{
"title": "addTransitionType",
- "path": "/reference/react/addTransitionType",
- "version": "canary"
+ "path": "/reference/react/addTransitionType"
},
{
"title": "cache",
@@ -250,8 +248,7 @@
"routes": [
{
"title": "browser",
- "path": "/reference/react-dom/browser",
- "version": "canary"
+ "path": "/reference/react-dom/browser"
},
{
"title": "createPortal",
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 48e45300f30..131e0d23632 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -9,7 +9,7 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/
exports.siteConfig = {
- version: '19.2',
+ version: '19.3',
// --------------------------------------
// Translations should replace these lines:
languageCode: 'en',
diff --git a/yarn.lock b/yarn.lock
index dba28706ebe..8f9f6adcdb8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7140,10 +7140,10 @@ react-remove-scroll@2.5.5:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
-react-server-dom-webpack@^19.2.4:
- version "19.2.4"
- resolved "https://registry.yarnpkg.com/react-server-dom-webpack/-/react-server-dom-webpack-19.2.4.tgz#2c0e5d3b4be09428a1e5fb25bde7d00e804ef4f4"
- integrity sha512-zEhkWv6RhXDctC2N7yEUHg3751nvFg81ydHj8LTTZuukF/IF1gcOKqqAL6Ds+kS5HtDVACYPik0IvzkgYXPhlQ==
+react-server-dom-webpack@^19.3.0:
+ version "19.3.0"
+ resolved "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-19.3.0.tgz#f30eaac50578db6f9aa5a38ece7c28d17de05271"
+ integrity sha512-ymt9RkvWtW4OpIhWf1wj4u5CxnBaVbDCkz/bw3/QFmOE7+/wg8C30uiJ/QqkEdWn/UqT5c7/rOUW/eWYMwceCg==
dependencies:
acorn-loose "^8.3.0"
neo-async "^2.6.1"
+
+
+
+
+ );
+}
+```
+
+```js src/Card.js
+export default function Card({ title }) {
+ return Scroll down
+
+ Scroll up
+ {title}
;
+}
+```
+
+```js src/InView.js
+import {
+ Fragment,
+ useRef,
+ useLayoutEffect,
+} from 'react';
+
+export default function InView({ onChange, children }) {
+ const fragmentRef = useRef(null);
+
+ useLayoutEffect(() => {
+ const visibleElements = new Set();
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach(e => {
+ if (e.isIntersecting) {
+ visibleElements.add(e.target);
+ } else {
+ visibleElements.delete(e.target);
+ }
+ });
+ onChange(visibleElements.size > 0);
+ }
+ );
+ const fragmentInstance = fragmentRef.current;
+ fragmentInstance.observeUsing(observer);
+ return () => {
+ fragmentInstance.unobserveUsing(observer);
+ };
+ }, [onChange]);
+
+ return (
+ {timeZone}
+} + +export default function App() { + return ( + <> +Your current time zone is:
+{defaultValue}
; + } + + use(browser()); + const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; + + return{localTimeZone}
+} + +export default function App() { + return ( + <> +
+
+
+ The event's time zone is:
++ +
+
+
+
+
+ );
+}
+```
+
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+ return (
+
+
+ Your current time zone is:
+