You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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]>
Call `useDeferredValue` at the top level of your component to get a deferred version of that value.
24
24
@@ -37,13 +37,23 @@ function SearchPage() {
37
37
#### Parameters {/*parameters*/}
38
38
39
39
*`value`: The value you want to defer. It can have any type.
40
+
* <CanaryBadgetitle="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
+
40
42
41
43
#### Returns {/*returns*/}
42
44
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>
44
52
45
53
#### Caveats {/*caveats*/}
46
54
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
+
47
57
- 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.
48
58
49
59
- 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