React useDeferredValue Hook

What is useDeferredValue Hook in React?

useDeferredValue returns a copy of a value that is allowed to lag behind during heavy rendering. React first renders with the old value to stay responsive, then re-renders with the new one when it has time.

Why useDeferredValue Hook matters

It gives the benefit of a transition when you receive a value as a prop and have no setter to wrap — for example a search term passed down from a parent.

useDeferredValue Hook example

function Results({ query }) {
  const deferred = useDeferredValue(query);
  const stale = query !== deferred;

  const list = useMemo(() => filterBigList(deferred), [deferred]);

  return (
    <div style={{ opacity: stale ? 0.6 : 1 }}>
      <ExpensiveList items={list} />
    </div>
  );
}

How this works

Comparing query with its deferred copy tells you the display is stale, so you can dim it while the fresh render is in flight.

Key points to remember

• Pair it with useMemo and React.memo, or the expensive child re-renders anyway.
• It reduces jank; it does not make the computation faster.

Common mistakes with useDeferredValue Hook

• Using it without memoising the expensive child, so nothing is actually deferred.
• Deferring a value used by an input’s own value prop, which makes typing feel broken.