React useDeferredValue

`useDeferredValue` lets a derived value intentionally lag behind an urgent update, allowing React to defer expensive rendering based on that value. It is useful when an input should stay responsive while a dependent UI can update later.

`useDeferredValue(value)` returns a value that React may keep at its previous version while higher-priority work is processed. When the original value changes, React can first render with the old deferred value and then attempt a background render using the new value.

The hook is most useful when the value drives an expensive subtree, such as filtering or rendering a large list. The input itself can update immediately because it does not depend on the deferred version for its controlled state.

The deferred value is not a debounce and does not wait for a fixed amount of time. React decides when the lower-priority rendering can proceed, so the UI may update sooner or later depending on available work and scheduling.

`useDeferredValue` also does not prevent the expensive calculation itself from running if the calculation happens before the deferred value is consumed. The main benefit comes from letting React schedule rendering driven by the deferred value separately from urgent updates.

A common pattern is to keep `query` current for an input and derive `deferredQuery = useDeferredValue(query)`, then pass `deferredQuery` to an expensive results component.

Key points

• Keeps an expensive dependent UI allowed to lag behind urgent updates.
• Returns the current value initially and may temporarily return the previous value after changes.
• Uses React scheduling rather than a fixed time delay.
• Useful for keeping controlled inputs responsive while rendering expensive results.
• Not a replacement for debouncing, memoization, virtualization, or optimizing expensive calculations.

Interview questions

What problem does `useDeferredValue` solve?

It helps keep urgent UI interactions responsive when another part of the UI is expensive to render. You keep the immediate value for things such as a controlled input and use the deferred version for the expensive results. React can then allow the expensive part to lag temporarily. The result is smoother interaction rather than a guaranteed delay.

How is `useDeferredValue` different from `useTransition`?

`useTransition` is used when you control the state update and want to mark that update as non-urgent. `useDeferredValue` is useful when you already have a value and want React to provide a lagging version for expensive consumers. Both participate in React's concurrent scheduling model. The choice depends on whether you want to defer the update itself or the rendering that depends on an existing value.

Is `useDeferredValue` the same as debouncing?

No. Debouncing is normally based on a time interval, such as waiting 300 milliseconds after the last keystroke. `useDeferredValue` does not specify a timeout and instead lets React schedule work according to its rendering priorities. Therefore, it is appropriate for rendering responsiveness, but it should not be used when the requirement is to delay an API request by a particular amount of time.

What happens when the source value changes while the deferred value is still old?

React can render with the previous deferred value while it processes the more urgent update. It can then attempt a background render using the new value. If that background work is interrupted by more urgent work, React can abandon or restart it as appropriate. This means consumers of the deferred value must tolerate it temporarily not matching the source value.

What should you do if the expensive operation itself is the bottleneck?

First identify whether the bottleneck is computation, rendering, or both. `useDeferredValue` can improve responsiveness by allowing dependent rendering to be interrupted, but it does not inherently make an expensive calculation cheaper. Depending on the workload, memoization, list virtualization, algorithmic improvements, caching, or moving work elsewhere may be more appropriate. The hook should be treated as a scheduling tool rather than a general performance optimization.