useDeferredValue with Transitions returns new value immediately
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.
React · API reference · all subjects
hooks: rules & constraints
6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useDeferredValue requires primitive values or external objects
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.
useDeferredValue uses Object.is for value comparison
When useDeferredValue receives a different value compared with 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.
useDeferredValue does not prevent network requests
useDeferredValue does not by itself prevent extra network requests.
useDeferredValue background re-render Effects timing
The background re-render caused by useDeferredValue does not fire Effects until it's committed to the screen. If the background re-render suspends, its Effects will run after the data loads and the UI updates.
useDeferredValue requires memo wrapper for performance optimization
When using useDeferredValue as a performance optimization, the component receiving the deferred value must be wrapped in memo. This allows it to skip re-rendering when its props haven't changed. Without memo, the component would re-render anyway on every parent update, defeating the optimization.