Skip to content

Commit f8c81a0

Browse files
authored
Use stable activity imports (#8085)
1 parent 7ecf008 commit f8c81a0

File tree

2 files changed

+7
-7
lines changed

2 files changed

+7
-7
lines changed

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11543,7 +11543,7 @@ Try searching for a video, selecting it, and clicking "back":
1154311543
<Sandpack>
1154411544

1154511545
```js src/App.js
11546-
import { 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;
11546+
import { Activity, ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
1154711547

1154811548
export default function App() {
1154911549
const { url } = useRouter();
@@ -12880,7 +12880,7 @@ With this update, if the content on the next page has time to pre-render, it wil
1288012880
<Sandpack>
1288112881

1288212882
```js src/App.js
12883-
import { 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;
12883+
import { Activity, ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data';
1288412884

1288512885
export default function App() {
1288612886
const { url } = useRouter();

src/content/reference/react/Activity.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ and check out the new behavior:
190190
<Sandpack>
191191

192192
```js src/App.js active
193-
import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
193+
import { Activity, useState } from 'react';
194194

195195
import Sidebar from './Sidebar.js';
196196

@@ -376,7 +376,7 @@ If we switch to using an Activity boundary to show and hide the active tab, we c
376376
<Sandpack>
377377

378378
```js src/App.js active
379-
import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
379+
import { Activity, useState } from 'react';
380380
import TabButton from './TabButton.js';
381381
import Home from './Home.js';
382382
import Contact from './Contact.js';
@@ -620,7 +620,7 @@ Try clicking the Posts tab now:
620620
<Sandpack>
621621

622622
```js src/App.js
623-
import { useState, Suspense } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
623+
import { Activity, useState, Suspense } from 'react';
624624
import TabButton from './TabButton.js';
625625
import Home from './Home.js';
626626
import Posts from './Posts.js';
@@ -1010,7 +1010,7 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst
10101010
<Sandpack>
10111011

10121012
```js src/App.js active
1013-
import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
1013+
import { Activity, useState } from 'react';
10141014
import TabButton from './TabButton.js';
10151015
import Home from './Home.js';
10161016
import Video from './Video.js';
@@ -1127,7 +1127,7 @@ Let's see the new behavior. Try playing the video, switching to the Home tab, th
11271127
<Sandpack>
11281128

11291129
```js src/App.js active
1130-
import { useState } from 'react'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
1130+
import { Activity, useState } from 'react';
11311131
import TabButton from './TabButton.js';
11321132
import Home from './Home.js';
11331133
import Video from './Video.js';

0 commit comments

Comments
 (0)