mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 20:53:08 +00:00
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:
@@ -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>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user