From f7ee3bbba8897dd135eb1d17e9e82a6047b6167b Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Wed, 1 Oct 2025 18:45:05 -0400 Subject: [PATCH 1/2] Fix Activity sandboxes --- src/content/reference/react/Activity.md | 36 ++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index dad6587b3eb..1a1771be076 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -167,8 +167,8 @@ h1 { ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -291,8 +291,8 @@ h1 { ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -402,8 +402,8 @@ b { display: inline-block; margin-right: 10px; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -511,8 +511,8 @@ b { display: inline-block; margin-right: 10px; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -678,8 +678,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -831,8 +831,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1100,8 +1100,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1210,8 +1210,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1357,8 +1357,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "19.2.0", + "react-dom": "19.2.0", "react-scripts": "latest", "toastify-js": "1.12.0" }, From 370df03785dfd66c82937f11024dd183c15f915e Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Wed, 1 Oct 2025 19:20:54 -0400 Subject: [PATCH 2/2] hacky fix --- ...labs-view-transitions-activity-and-more.md | 4 +- src/content/reference/react/Activity.md | 47 ++++++++++--------- 2 files changed, 26 insertions(+), 25 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 1a1771be076..3d57a8188cf 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -167,8 +167,8 @@ h1 { ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -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() { @@ -291,8 +292,8 @@ h1 { ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -402,8 +403,8 @@ b { display: inline-block; margin-right: 10px; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -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'; @@ -511,8 +512,8 @@ b { display: inline-block; margin-right: 10px; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -678,8 +679,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -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'; @@ -831,8 +832,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1100,8 +1101,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -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'; @@ -1210,8 +1211,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -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'; @@ -1357,8 +1358,8 @@ video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; } ```json package.json hidden { "dependencies": { - "react": "19.2.0", - "react-dom": "19.2.0", + "react": "experimental", + "react-dom": "experimental", "react-scripts": "latest", "toastify-js": "1.12.0" },