Skip to content

Commit af59d7e

Browse files
committed
Clarify use vs await
1 parent 93f6c27 commit af59d7e

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

  • src/content/reference/react

src/content/reference/react/use.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,7 +1131,7 @@ A Server Component can also start a Promise without awaiting it and pass the Pro
11311131
```js
11321132
// Server Component
11331133
export default function App() {
1134-
// Not awaited: starts here, resolves on the client.
1134+
// Not awaited: starts on the server, streamed to the client.
11351135
const messagePromise = fetchMessage();
11361136
return <Message messagePromise={messagePromise} />;
11371137
}
@@ -1149,9 +1149,9 @@ export function Message({ messagePromise }) {
11491149
}
11501150
```
11511151
1152-
Prefer `await` in a Server Component when possible, since it keeps the data fetching on the server. If a Server Component above already awaits the data, pass the resolved value down as a prop instead of creating a new Promise to call `use`.
1152+
Prefer `await` in a Server Component when possible. If a Server Component above already awaits the data, pass the resolved value down as a prop instead of creating a new Promise to call `use`.
11531153
1154-
You can also pass promise as a prop to a Client Component without awaiting it, and then read it with `use(promise)` to suspend deeper in the tree. This allows more of the surrounding UI to complete while the Promise is pending. A common case is interactive content like popovers and tooltips, where the data is needed only after a hover or click. Client Components can't `await`, so they rely on `use` to suspend on a Promise.
1154+
Pass a Promise to a Client Component to suspend deeper in the tree, letting more of the surrounding UI render while the Promise is pending. A common case is interactive content like popovers and tooltips, where the data is only needed after a hover or click. Client Components can't `await`, so they read a Promise with `use`.
11551155
11561156
In either case, wrap the component that reads the Promise in a Suspense boundary so React can show a fallback while the Promise is pending. See [Revealing content together at once](/reference/react/Suspense#revealing-content-together-at-once) for guidance on boundary placement.
11571157

0 commit comments

Comments
 (0)