useDeferredValue: Keep UI Responsive During Renders
useDeferredValue keeps your UI responsive by showing a stale value while a new, expensive-to-render value is prepared in the background. Use it for search inputs filtering large lists.
Why it exists
Some UI updates are slow. If a user types into a search box and the app tries to filter a massive list on every keystroke, the input itself can feel laggy. React needs a way to prioritize the fast update (the input field) over the slow one (the list).
The mental model
Think of useDeferredValue as creating a lower-priority version of a state value. When the original value changes, React immediately re-renders using the old deferred value to keep the UI snappy. Then, in the background, it starts a second, interruptible re-render with the new value.
How it works
You pass a value to the hook: const deferredQuery = useDeferredValue(query). When query changes, React first re-renders the component where deferredQuery still equals the previous query. This is a high-priority update. Immediately after, it schedules a low-priority re-render where deferredQuery will equal the new query. If query changes again before the low-priority render finishes, React abandons it and starts over with the latest value. This prevents rendering intermediate, outdated states.
When to use it
Use it when a fast user interaction (like typing) triggers a slow, expensive render. It's perfect for search inputs that filter large lists, data visualizations that update on streaming data, or any component that becomes sluggish from rapid state changes. It lets you show stale data briefly to avoid freezing the UI.
When not to use it
Don't use it as a replacement for debouncing if you need to control network requests; useDeferredValue doesn't prevent them. Also, if an update is already wrapped in startTransition, this hook is redundant. Finally, avoid passing objects created fresh in the render function (useDeferredValue({ prop: value })), as each new object identity will trigger an unnecessary background render.
One canonical example
A search page has a text input and a list of results. The input's state is query. To prevent the list from re-rendering and blocking the UI on every keystroke, you create a deferred version: const deferredQuery = useDeferredValue(query). The <input> uses query for its value, so it feels instant. The <ResultsList> component uses deferredQuery as a prop, so it only updates after the user stops typing or pauses, keeping the typing experience smooth.
Interview question
Which best describes how useDeferredValue maintains UI responsiveness during an expensive update?
- a.It postpones the state update until the user interaction ceases, similar to debouncing.
- b.It prevents the component from re-rendering until all background computations are fully completed.
- c.It caches the expensive computation results to display them instantly on subsequent renders.
- d.It first renders with the previous deferred value at high priority, then with the new value at low priority.Correct
Why? this is the answer
Option D correctly describes the mechanism: React performs an immediate, high-priority render with the old deferred value to keep the UI snappy, then schedules a low-priority, interruptible render with the new value. Option A describes debouncing, which the card explicitly states useDeferredValue is not a replacement for.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles