From 74b67b117d307277ff978e548a16f9cb3f20698d Mon Sep 17 00:00:00 2001 From: Sebastian Sebbie Silbermann Date: Thu, 2 Oct 2025 13:59:07 +0200 Subject: [PATCH 01/12] Use stable release in demos with HTML output --- src/components/MDX/SandpackWithHTMLOutput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx index c5149deb948..9d92e0b8e24 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": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-scripts": "^5.0.0", "html-format": "^1.1.2" }, From d44deaea3a1562894bb447b4d453fb71d2bf6422 Mon Sep 17 00:00:00 2001 From: Ricky Date: Wed, 1 Oct 2025 19:23:34 -0400 Subject: [PATCH 02/12] Fix Activity sandboxes (#8035) * Fix Activity sandboxes * hacky fix --- .../react-labs-view-transitions-activity-and-more.md | 4 ++-- src/content/reference/react/Activity.md | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 6d3faa6ce34..41c359807ab 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -11542,7 +11542,7 @@ Try searching for a video, selecting it, and clicking "back": ```js src/App.js -import { unstable_ViewTransition as ViewTransition, Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; +import { unstable_ViewTransition as ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; export default function App() { const { url } = useRouter(); @@ -12879,7 +12879,7 @@ With this update, if the content on the next page has time to pre-render, it wil ```js src/App.js -import { unstable_ViewTransition as ViewTransition, Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data' +import { unstable_ViewTransition as ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; export default function App() { const { url } = useRouter(); diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index dad6587b3eb..3d57a8188cf 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -206,7 +206,8 @@ and check out the new behavior: ```js src/App.js active -import { Activity, useState } from 'react'; +import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; + import Sidebar from './Sidebar.js'; export default function App() { @@ -425,7 +426,7 @@ If we switch to using an Activity boundary to show and hide the active tab, we c ```js src/App.js active -import { useState, Activity } from 'react'; +import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; import TabButton from './TabButton.js'; import Home from './Home.js'; import Contact from './Contact.js'; @@ -703,7 +704,7 @@ Try clicking the Posts tab now: ```js src/App.js -import { useState, Suspense, Activity } from 'react'; +import { useState, Suspense } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; import TabButton from './TabButton.js'; import Home from './Home.js'; import Posts from './Posts.js'; @@ -1127,7 +1128,7 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst ```js src/App.js active -import { useState, Activity } from 'react'; +import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; import TabButton from './TabButton.js'; import Home from './Home.js'; import Video from './Video.js'; @@ -1261,7 +1262,7 @@ Let's see the new behavior. Try playing the video, switching to the Home tab, th ```js src/App.js active -import { useState, Activity } from 'react'; +import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; import TabButton from './TabButton.js'; import Home from './Home.js'; import Video from './Video.js'; From 609a3bfffd9a99956132adbcae3fc35e422a02ec Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 2 Oct 2025 00:24:47 +0100 Subject: [PATCH 03/12] Revert "Fix Activity sandboxes (#8035)" This reverts commit f9fd07ca599b3c910528a97399bad851a6870474. --- .../react-labs-view-transitions-activity-and-more.md | 4 ++-- src/content/reference/react/Activity.md | 11 +++++------ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 41c359807ab..6d3faa6ce34 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -11542,7 +11542,7 @@ Try searching for a video, selecting it, and clicking "back": ```js src/App.js -import { unstable_ViewTransition as ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { unstable_ViewTransition as ViewTransition, Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; export default function App() { const { url } = useRouter(); @@ -12879,7 +12879,7 @@ With this update, if the content on the next page has time to pre-render, it wil ```js src/App.js -import { unstable_ViewTransition as ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { unstable_ViewTransition as ViewTransition, Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data' export default function App() { const { url } = useRouter(); diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 3d57a8188cf..dad6587b3eb 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -206,8 +206,7 @@ and check out the new behavior: ```js src/App.js active -import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; - +import { Activity, useState } from 'react'; import Sidebar from './Sidebar.js'; export default function App() { @@ -426,7 +425,7 @@ If we switch to using an Activity boundary to show and hide the active tab, we c ```js src/App.js active -import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { useState, Activity } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; import Contact from './Contact.js'; @@ -704,7 +703,7 @@ Try clicking the Posts tab now: ```js src/App.js -import { useState, Suspense } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { useState, Suspense, Activity } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; import Posts from './Posts.js'; @@ -1128,7 +1127,7 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst ```js src/App.js active -import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { useState, Activity } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; import Video from './Video.js'; @@ -1262,7 +1261,7 @@ Let's see the new behavior. Try playing the video, switching to the Home tab, th ```js src/App.js active -import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity; +import { useState, Activity } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; import Video from './Video.js'; From 27dafc3ee1af32a28666ac17e3be076104f88f21 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 2 Oct 2025 00:26:34 +0100 Subject: [PATCH 04/12] Bump to 19.2 --- src/components/MDX/Sandpack/template.ts | 4 +- src/content/reference/react/Activity.md | 153 ------------------------ 2 files changed, 2 insertions(+), 155 deletions(-) diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index 358c8616eda..ed594887bde 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.1.0', - 'react-dom': '^19.1.0', + react: '^19.2.0', + 'react-dom': '^19.2.0', 'react-scripts': '^5.0.0', }, }, diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index dad6587b3eb..f393f49a624 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -164,23 +164,6 @@ h1 { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest", - "toastify-js": "1.12.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost. @@ -288,23 +271,6 @@ h1 { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest", - "toastify-js": "1.12.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - Our sidebar's internal state is now restored, without any changes to its implementation. @@ -399,23 +365,6 @@ b { display: inline-block; margin-right: 10px; } .pending { color: #777; } ``` -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest", - "toastify-js": "1.12.0" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `