How is useDeferredValue different from debouncing?
useDeferredValue gives you a lagging copy of a value that React updates when it is idle, with no fixed delay and with interruptible rendering. Debouncing waits a set time before updating and cannot be interrupted once the work starts.
Explain it simply
A debounce is a fixed timer: wait 300 ms after the last keystroke. It also delays work on a fast laptop that could have finished instantly.
useDeferredValue(value) returns the old value first and then the new value in a lower-priority render. On a fast device the delay is almost nothing, on a slow one React keeps typing smooth and catches up later. If the user types again, React abandons the unfinished render.
Debounce still wins when you want to reduce network requests, since deferred values do not stop work from happening, they only change when it is scheduled.
Example
function Search({ items }) {
const [q, setQ] = useState("");
const deferredQ = useDeferredValue(q);
return (
<>
<input value={q} onChange={e => setQ(e.target.value)} />
<SlowList items={items} query={deferredQ} />
</>
);
}SlowList should be wrapped in React.memo so it can skip renders while deferredQ is unchanged.
What to say in the interview
"useDeferredValue defers a value's update to a lower priority render, adapting to device speed and allowing interruption. Debouncing uses a fixed delay and is still the right tool for limiting API calls. For heavy local rendering such as filtering a big list, I prefer useDeferredValue."
Common mistakes
- Expecting useDeferredValue to reduce the number of network requests.