Explain useDeferredValue in React

28 / 100

Hooksadvanced

useDeferredValue

Learn how useDeferredValue lets a slow-to-render part of the UI lag behind a fast-changing value without blocking input.

useDeferredValue(value) returns a deferred copy of value that React may 'lag behind' the actual value during urgent updates, letting an expensive part of the UI that depends on it re-render at a lower priority. It's conceptually similar to useTransition, but it's applied at the point of consuming a value rather than at the point of setting state, which makes it useful when you don't control the state update itself (e.g., the value comes from a parent via props).

useDeferredValue is like a live scoreboard at a stadium that's allowed to lag a few seconds behind the actual game — spectators (urgent UI) keep watching smoothly in real time while the board (expensive UI) catches up shortly after, rather than freezing the whole stadium's view until the board updates instantly.

Key Concepts

A common use is deferring a search query passed into an expensive results list: the input reflects query immediately for responsiveness, while the expensive ResultsList renders based on useDeferredValue(query), letting React deprioritize re-rendering the list until the more urgent input update settles.

queryResultsListuseDeferredValue(query)

Comparing the deferred value to the current value (query !== deferredQuery) lets you show a stale-but-not-blocking state, such as dimming the old results while new ones compute, similar to how isPending works with transitions, but without needing to wrap the original setState call.

query !== deferredQueryisPendingsetState

Interviewers frequently ask candidates to contrast useDeferredValue with useTransition: transitions defer a state *update* you trigger yourself, while deferred values defer the *consumption* of a value you receive, which matters when you're consuming a prop or a value from a hook you don't control the setter for.

useDeferredValueuseTransition