Hook · Concurrency
useDeferredValue
A lagging version
useDeferredValue takes a value and returns a 'slow' copy that React updates with low priority. Useful when you don't control the setState — only the value arriving as a prop.
When to use it
When you receive a fast-changing value and pass it to an expensive component. The input stays smooth because the expensive component re-renders with the deferred value, not the current one.
Vs useTransition
useTransition controls the setState; useDeferredValue controls a received value. Often interchangeable — choose based on where you have control.
Common pitfalls
- 01useDeferredValue does not debounce: it defers based on React's scheduler, not time.
- 02The deferred value may briefly show stale UI — show a visual indicator when deferred !== current.
- 03If the component receiving the deferred value is not wrapped in memo, there's no benefit.
Was this helpful?
Sign in to give feedback