useDeferredValue

React chapter 17 · React 18 · deferred values · source: react.dev/reference/react/useDeferredValue

The problem

A heavy child receives a value that changes on every keystroke. You only hold the value, not the setter, so you cannot wrap anything in startTransition, and typing gets sticky.

The pattern that fixes it

useDeferredValue(query) gives you a copy that trails behind during urgent updates. Show the input with query and the heavy child with the deferred copy, and wrap the child in memo so it can really skip.

In plain words

You can tell React "use the old value for this part of the screen for now, and catch up when you have a free moment". The input stays instant and the slow part follows right behind.

A scoreboard operator updates the big display only when the play settles. Meanwhile the referee (the input) already knows the new score.

Terms

deferred value
A copy of a value that may lag behind the real one while React is busy with something more urgent.
stale
Showing the previous result because the newest one is not ready yet.
memo
A wrapper that lets a component skip rendering when its props did not change.

Going deeper

How does it work?

On an urgent update React first renders with the old deferred value, so the heavy child gets identical props and can be skipped. Right after, it starts a second, interruptible render with the new value. If you type again before it finishes, that background render is thrown away and restarted with the newest text.

Pitfalls: when it does nothing

If the heavy child is not wrapped in memo, it still re-renders during the urgent update (with the old value), so the lag stays. It also changes nothing if the child is cheap, and it never makes a single render faster. Passing a fresh object each time as the deferred value defeats the comparison, so defer primitives like text.

When not to use it, and alternatives

If you own both state updates, useTransition (previous chapter) gives you an isPending flag for free. For network requests use debouncing or a data library, because deferring does not delay the request itself. The React Compiler can add the memo part for you, but you still choose what to defer.

Keep learning

More courses

  • Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
  • Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
  • Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
  • System Design — Eight interview case studies, from a flash sale and Tatkal to a live final and a chat model, plus JWT in separate chapters.
  • Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
  • Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
  • Frontend system design — How a UI is sliced when it is a product, not a page: ownership of state, cache, routes, and what happens when the network lies.
  • CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
  • Accessibility — HTML labs first, then a full pass of WAI-ARIA 1.3: naming, every state, widget and structure roles, live regions, ariaNotify, and relationships.
  • Docker — What an image is, why layers cache, and how containers find each other on a network.
  • Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.