Skip to content

Commit 07cbd00

Browse files
API docs for useDeferredValue's initialValue (#6747)
* API docs for useDeferredValue's initialValue Updates the API docs for `useDeferredValue` to include the `initialValue` option, added in facebook/react#27500. This feature is slated for release in React 19. * Add docs for onCaughtError and onUncaughtError (#6742) * Add docs for onCaughtError and onUncaughtError * Updates from feedback * Add canary info, simplify a bit --------- Co-authored-by: Ricky <[email protected]>
1 parent 37a8d64 commit 07cbd00

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

Diff for: src/content/reference/react/useDeferredValue.md

+12-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const deferredValue = useDeferredValue(value)
1818

1919
## Reference {/*reference*/}
2020

21-
### `useDeferredValue(value)` {/*usedeferredvalue*/}
21+
### `useDeferredValue(value, initialValue?)` {/*usedeferredvalue*/}
2222

2323
Call `useDeferredValue` at the top level of your component to get a deferred version of that value.
2424

@@ -37,13 +37,23 @@ function SearchPage() {
3737
#### Parameters {/*parameters*/}
3838

3939
* `value`: The value you want to defer. It can have any type.
40+
* <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead.
41+
4042

4143
#### Returns {/*returns*/}
4244

43-
During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
45+
- `currentValue`: During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
46+
47+
<Canary>
48+
49+
In the latest React Canary versions, `useDeferredValue` returns the `initialValue` on initial render, and schedules a re-render in the background with the `value` returned.
50+
51+
</Canary>
4452

4553
#### Caveats {/*caveats*/}
4654

55+
- When an update is inside a Transition, `useDeferredValue` always returns the new `value` and does not spawn a deferred render, since the update is already deferred.
56+
4757
- The values you pass to `useDeferredValue` should either be primitive values (like strings and numbers) or objects created outside of rendering. If you create a new object during rendering and immediately pass it to `useDeferredValue`, it will be different on every render, causing unnecessary background re-renders.
4858

4959
- When `useDeferredValue` receives a different value (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), in addition to the current render (when it still uses the previous value), it schedules a re-render in the background with the new value. The background re-render is interruptible: if there's another update to the `value`, React will restart the background re-render from scratch. For example, if the user is typing into an input faster than a chart receiving its deferred value can re-render, the chart will only re-render after the user stops typing.

0 commit comments

Comments
 (0)