Skip to content

Commit d191c36

Browse files
Address review feedback
1 parent 1e284d4 commit d191c36

1 file changed

Lines changed: 14 additions & 16 deletions

File tree

  • src/content/reference/react

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1540,34 +1540,32 @@ See [caching Promises for Client Components](#caching-promises-for-client-compon
15401540
15411541
---
15421542
1543-
### `use` returns the value of a different Promise {/*wrong-promise-value*/}
1543+
### I get the value of a different Promise from `use` {/*wrong-promise-value*/}
15441544
1545-
On the server, React matches each `use` call to its Promise by call order, not by the Promise itself. If a component suspends and runs again, React reuses the Promise already recorded at each position.
1545+
On the server, React matches each `use` call to its Promise by call order, not by the Promise itself. A component suspends while the Promise passed to `use` is pending, then runs again once that Promise resolves. When resuming, React reuses the Promise already recorded at each position.
15461546
1547-
If `use` is called conditionally, and the condition stops `use` from being called once its Promise resolves, the next `use` call takes the skipped position and receives the earlier Promise's value:
1547+
If `use` causes a suspend and `use` is no longer called after resuming, every later `use` call with a Promise shifts up a position. This means `use` may be passed a Promise meant for a different callsite. This happens when a component stops calling `use` once its data is cached:
15481548
15491549
```js
15501550
function Album() {
1551-
// 🔴 Called on the first attempt, which resolves `tracksPromise`
1552-
// and sets `cache.tracks`. Skipped on the attempt after that.
1553-
const tracks = cache.tracks ?? use(tracksPromise);
1551+
// 🔴 First `use` is called and causes a suspend. When resuming the
1552+
// value for `cache.tracks` is used and `use` is no longer called
1553+
const tracks = cache.tracks ?? use(fetchData('/tracks'));
15541554

1555-
// Now the 1st `use` call instead of the 2nd, so React returns
1556-
// the Promise recorded in that position: `tracksPromise`.
1557-
const artist = use(artistPromise);
1555+
// Now the first `use(Promise)` call, so the Promise for the first
1556+
// position (`fetchData('/tracks')`) is passed to it
1557+
const artist = use(fetchData('/artist'));
15581558
}
15591559
```
15601560
1561-
To fix this, move the `use` calls out of the conditions so the same `use` calls run in the same order on every attempt:
1561+
As described in [this pitfall](#conditional-use), always pass the Promise to `use` and let React read it:
15621562
15631563
```js
15641564
function Album() {
1565-
// ✅ Always the 1st and 2nd `use` calls
1566-
const loadedTracks = use(tracksPromise);
1567-
const artist = use(artistPromise);
1568-
1569-
const tracks = cache.tracks ?? loadedTracks;
1565+
// ✅ Both Promises are always passed to `use`
1566+
const tracks = use(fetchData('/tracks'));
1567+
const artist = use(fetchData('/artist'));
15701568
}
15711569
```
15721570
1573-
This does not affect the browser.
1571+
This does not affect `use` when called in the browser.

0 commit comments

Comments
 (0)