Skip to content

Commit eebc8f2

Browse files
committed
Align Suspense resource loading examples
1 parent a7e74ea commit eebc8f2

1 file changed

Lines changed: 15 additions & 18 deletions

File tree

‎src/content/reference/react/Suspense.md‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2910,7 +2910,7 @@ For comparison, the second button performs the same update without React. Nothin
29102910
<Sandpack>
29112911
29122912
```js
2913-
import { ViewTransition, Suspense, use, useState, startTransition } from 'react';
2913+
import { ViewTransition, Suspense, use, useState } from 'react';
29142914
import { fetchQuote } from './data.js';
29152915
import { freshFontUrl } from './font.js';
29162916
import VanillaQuote from './VanillaQuote.js';
@@ -2935,12 +2935,7 @@ export default function App() {
29352935
const [fontSrc, setFontSrc] = useState(null);
29362936
return (
29372937
<>
2938-
<button
2939-
onClick={() => {
2940-
startTransition(() => {
2941-
setFontSrc(freshFontUrl());
2942-
});
2943-
}}>
2938+
<button onClick={() => setFontSrc(freshFontUrl())}>
29442939
Show quote
29452940
</button>
29462941
{fontSrc && (
@@ -3038,15 +3033,17 @@ hr {
30383033
```json package.json hidden
30393034
{
30403035
"dependencies": {
3041-
"react": "19.3.0-canary-f1f7ed2a-20260904",
3042-
"react-dom": "19.3.0-canary-f1f7ed2a-20260904",
3036+
"react": "19.3.0",
3037+
"react-dom": "19.3.0",
30433038
"react-scripts": "latest"
30443039
}
30453040
}
30463041
```
30473042
30483043
</Sandpack>
30493044
3045+
When the Promise resolves, React retries rendering the suspended content. This retry activates the enclosing `<ViewTransition>`, so this example does not need `startTransition`.
3046+
30503047
---
30513048
30523049
### Waiting for an image to load {/*waiting-for-an-image-to-load*/}
@@ -3204,7 +3201,7 @@ For comparison, the version without React loads the same data and shows every re
32043201
<Sandpack>
32053202
32063203
```js
3207-
import { ViewTransition, Suspense, use, useState, startTransition } from 'react';
3204+
import { ViewTransition, Suspense, use, useState } from 'react';
32083205
import { fetchQuote } from './data.js';
32093206
import { freshStylesheetUrl, freshImageUrl } from './resources.js';
32103207
import VanillaProfileCard from './VanillaProfileCard.js';
@@ -3243,12 +3240,10 @@ export default function App() {
32433240
<>
32443241
<button
32453242
onClick={() => {
3246-
startTransition(() => {
3247-
setResources({
3248-
quotePromise: fetchQuote(),
3249-
stylesheet: freshStylesheetUrl(),
3250-
image: freshImageUrl(),
3251-
});
3243+
setResources({
3244+
quotePromise: fetchQuote(),
3245+
stylesheet: freshStylesheetUrl(),
3246+
image: freshImageUrl(),
32523247
});
32533248
}}>
32543249
Show profile
@@ -3401,15 +3396,17 @@ hr {
34013396
```json package.json hidden
34023397
{
34033398
"dependencies": {
3404-
"react": "19.3.0-canary-f1f7ed2a-20260904",
3405-
"react-dom": "19.3.0-canary-f1f7ed2a-20260904",
3399+
"react": "19.3.0",
3400+
"react-dom": "19.3.0",
34063401
"react-scripts": "latest"
34073402
}
34083403
}
34093404
```
34103405
34113406
</Sandpack>
34123407
3408+
When the Promise resolves, React retries rendering the suspended content. This retry activates the enclosing `<ViewTransition>`, so this example does not need `startTransition`.
3409+
34133410
---
34143411
34153412
## Troubleshooting {/*troubleshooting*/}

0 commit comments

Comments
 (0)