From adf99711b44e2db9a45871ff9d98fb07df3ab6d3 Mon Sep 17 00:00:00 2001 From: Sam Selikoff Date: Wed, 9 Sep 2026 13:13:30 -0400 Subject: [PATCH 1/3] Prepare site for React 19.3 release --- src/components/MDX/Sandpack/template.ts | 4 +- src/components/MDX/SandpackWithHTMLOutput.tsx | 4 +- src/content/blog/2026/09/09/react-19-3.md | 1950 +++++++++++++++++ src/content/blog/index.md | 6 + src/content/reference/react-dom/browser.md | 17 +- .../reference/react-dom/client/hydrateRoot.md | 2 +- .../reference/react-dom/components/common.md | 6 +- src/content/reference/react-dom/index.md | 2 +- .../server/renderToPipeableStream.md | 2 +- .../server/renderToReadableStream.md | 2 +- .../reference/react-dom/server/resume.md | 2 +- .../server/resumeToPipeableStream.md | 2 +- .../reference/react-dom/static/prerender.md | 2 +- .../react-dom/static/prerenderToNodeStream.md | 2 +- .../react-dom/static/resumeAndPrerender.md | 2 +- .../static/resumeAndPrerenderToNodeStream.md | 2 +- src/content/reference/react/Fragment.md | 38 +- src/content/reference/react/Suspense.md | 34 +- src/content/reference/react/ViewTransition.md | 55 +- .../reference/react/addTransitionType.md | 9 - src/content/reference/react/apis.md | 2 +- src/content/reference/react/use.md | 8 +- .../reference/react/useLayoutEffect.md | 2 +- .../reference/rsc/server-components.md | 33 + src/content/versions.md | 4 +- src/sidebarBlog.json | 7 + src/sidebarReference.json | 9 +- src/siteConfig.js | 2 +- 28 files changed, 2089 insertions(+), 121 deletions(-) create mode 100644 src/content/blog/2026/09/09/react-19-3.md diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index fa8c9e4865f..89c7d657ac7 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -35,8 +35,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '^19.2.1', - 'react-dom': '^19.2.1', + react: '^19.3.0', + 'react-dom': '^19.3.0', 'react-scripts': '^5.0.0', }, }, diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx index 1d9e7f42d97..8e7cbf2f906 100644 --- a/src/components/MDX/SandpackWithHTMLOutput.tsx +++ b/src/components/MDX/SandpackWithHTMLOutput.tsx @@ -56,8 +56,8 @@ export default function formatHTML(markup) { const packageJSON = ` { "dependencies": { - "react": "^19.2.1", - "react-dom": "^19.2.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", "react-scripts": "^5.0.0", "html-format": "^1.1.2" }, diff --git a/src/content/blog/2026/09/09/react-19-3.md b/src/content/blog/2026/09/09/react-19-3.md new file mode 100644 index 00000000000..c23be2097c6 --- /dev/null +++ b/src/content/blog/2026/09/09/react-19-3.md @@ -0,0 +1,1950 @@ +--- +title: "React 19.3" +author: The React Team +date: 2026/09/09 +description: React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. +--- + +September 9, 2026 by [The React Team](/community/team) + +--- + + + +React 19.3 is now available on npm! + + + + +[Last year](/blog/2025/04/23/react-labs-view-transitions-activity-and-more), we shared View Transitions and Fragment Refs as new experimental APIs coming to React. We're excited to announce that both of these are now stable in React 19.3! + +In this post, we'll go over how they work, and also cover some other notable changes in this release. + + + +--- + +## New React Features {/*new-react-features*/} + +### View Transitions {/*view-transition*/} + +The new `` component lets you animate elements as they enter, exit, move, or resize using the browser's [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API). We shared it as an experimental API [last year](/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions), and in 19.3 it's stable and ready to use. + +To animate part of your UI, wrap it in ``: + +```js +import { ViewTransition } from 'react'; + +{isShowing && ( + + + +)} +``` + +Now, whenever an update marked as a [Transition](/reference/react/useTransition) changes the child component's style, or causes the `ViewTransition` to be mounted or unmounted, React will animate that update. + +{/* +Updates outside of a Transition don't trigger animations, as those are meant to be urgent and reflected immediately in the UI. State updates inside of [startTransition](/reference/react/startTransition), a [``](/reference/react/Suspense) reveal, or an update from [`useDeferredValue`](/reference/react/useDeferredValue) all cause a View Transition to animate. +*/} + +React chooses which animation to run based on how the tree changed: + +- **enter**: the `` is added. +- **exit**: the `` is removed. +- **update**: the children of a `` change style or content. +- **share**: a named `` is removed in one place and added in another. + +Note that updates not marked as Transitions don't trigger animations, as those are meant to be urgent and reflected immediately in the UI. State updates inside of [startTransition](/reference/react/startTransition), a [``](/reference/react/Suspense) reveal, or an update from [`useDeferredValue`](/reference/react/useDeferredValue) all cause a View Transition to animate. + +Here's a simple example of an enter/exit animation: + + + +```js src/Video.js hidden +function Thumbnail({video, children}) { + return ( +