Better use(Promise) example in 19 blog (#6790)

* Better use(Promise) example in 19 blog

* Better use(Promise) example in 19 blog
This commit is contained in:
Ricky
2024-04-25 22:01:32 -04:00
committed by GitHub
parent e09ff1c480
commit e45ac5552c

View File

@@ -243,14 +243,23 @@ In React 19 we're introducing a new API to read resources in render: `use`.
For example, you can read a promise with `use`, and React will Suspend until the promise resolves:
```js {1,6}
```js {1,5}
import {use} from 'react';
function Comments({commentsPromise}) {
// NOTE: this will resume the promise from the server.
// It will suspend until the data is available.
// `use` will suspend until the promise resolves.
const comments = use(commentsPromise);
return comments.map(comment => <p>{comment}</p>);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
function Page({commentsPromise}) {
// When `use` suspends in Comments,
// this Suspense boundary will be shown.
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
)
}
```