transitions
useDeferredValue
Returns a copy of a value that can lag behind during urgent updates so React can prioritize responsiveness. Reach for it when a child renders slowly from a prop and you want the parent's typing or interactions to stay snappy without restructuring state.
const deferred = useDeferredValue(value)Parameters & Behavior
| Parameter | Purpose |
|---|---|
| value | The current value — the returned deferred version may lag by one or more renders |
| return | The deferred value React will use for low-priority renders |
| isStale check | Compare value !== deferred to render a subtle stale indicator |
| no start function | Unlike useTransition, you don't wrap state updates — you just consume a lagged value |
Examples
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
return <SearchResults query={deferredQuery} />;Input updates immediately; the heavy results list catches up asynchronously
const deferred = useDeferredValue(text);
const isStale = deferred !== text;
return <div style={{ opacity: isStale ? 0.6 : 1 }}><Preview text={deferred} /></div>;Fade the preview slightly while it's lagging behind the input
const deferredList = useDeferredValue(items);
return <VirtualList items={deferredList} />;Keep scrolling smooth when items updates in large chunks
const MemoResults = memo(Results);
const deferred = useDeferredValue(query);
return <MemoResults query={deferred} />;Wrap the child in memo so the deferred value actually skips re-renders
Gotcha
Only helps if the consuming child is memoized — otherwise it re-renders on every parent render regardless. The lag is not a fixed delay; it depends on how busy React is.
Related hooks
useTransition
Marks state updates inside startTransition as non-urgent so React can keep the UI responsive to more urgent updates. Reach for it when a state change triggers heavy rendering (search results, tab switches) and you want the previous UI to stay interactive.
useMemo
Memoizes the result of a computation between renders, recomputing only when a dependency changes. Reach for it when a calculation is genuinely expensive or when you need a stable reference (e.g. as a dep of another hook or a context value).
useState
Declares a piece of local state in a function component and returns the current value along with a setter. Reach for it whenever a component needs to remember a value across renders and re-render when that value changes.