Skip to content

Commit 39b26e6

Browse files
committed
fix: update use.md pitfall to mention that bypassing use can corrupt React's internal state tracking
1 parent 1f48fb4 commit 39b26e6

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
@@ -662,18 +662,18 @@ This cache pattern is the foundation for [re-fetching data](#re-fetching-data-in
662662
663663
<Pitfall>
664664
665-
Don't conditionally call `use` based on whether a Promise is settled. Always call `use` unconditionally and let React handle reading the `status` field. This ensures React DevTools can show that the component may suspend on data.
665+
Don't skip calling `use` based on whether a Promise is already settled. Unlike other hooks, `use` can be called inside conditions and loops — but it must always be called for the Promise itself. Never read `promise.status` or `promise.value` directly to bypass `use`; always pass the Promise to `use` and let React handle it. Bypassing `use` this way can corrupt React's internal state tracking, causing stale renders, missed updates, or incorrect Suspense behavior. This also ensures React DevTools can show that the component may suspend on data.
666666
667667
```js
668-
// 🔴 Don't conditionally skip `use`
668+
// 🔴 Don't bypass `use` by reading promise status directly
669669
if (promise.status === 'fulfilled') {
670670
return promise.value;
671671
}
672672
const value = use(promise);
673673
```
674674
675675
```js
676-
// ✅ Always call `use` unconditionally
676+
// ✅ Always pass the promise to `use` and let React track promise readiness
677677
const value = use(promise);
678678
```
679679

0 commit comments

Comments
 (0)