`useDeferredValue`

Defers updating a value to keep the UI responsive during heavy renders.

Since React 18 Spec ↗

Syntax

const deferred = useDeferredValue(value, initialValue?)

Parameters

Name	Type	Required	Description
`value`	`any`	Yes	The value to defer; may be of any type.
`initialValue`	`any`	No	Value used during the initial render before the deferred value is available.

Returns

any — A possibly stale copy of value that lags during urgent updates.

Examples

function Results({ query }) {
  const deferredQuery = useDeferredValue(query);
  const list = useMemo(
    () => search(deferredQuery),
    [deferredQuery]
  );
  return <List items={list} />;
}

const deferred = useDeferredValue(text, '');

Notes

React first re-renders with the old value, then re-renders in the background with the new one. Useful for expensive lists where the input should stay snappy. Pair the deferred value with useMemo and React.memo so the costly subtree is skipped during urgent renders.