hardFrontend

What is `useDeferredValue` and how does it differ from debouncing?

Q: What is `useDeferredValue` and how does it differ from debouncing?

`useDeferredValue` returns a copy of a value that is allowed to *lag behind* during urgent work. React renders the stale value immediately and schedules a re-render with the fresh value at lower priority, so an input stays responsive while an expensive list re-renders off the deferred value. input updates now; deferred value catches up when React is idle value <text x="16" y="96"

913 views

Understand the problem

Compare adaptive deferral with fixed-time debounce/throttle.

reactconcurrentperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

Deferred value driving an expensive list

Run Playground

import { useState, useDeferredValue, useMemo } from 'react';

function SlowList({ text }) {
  const items = useMemo(() => {
    const out = [];
    for (let i = 0; i < 3000; i++) out.push(text + ' #' + i);
    return out;
  }, [text]);
  return <ul style={{ maxHeight: 160, overflow: 'auto' }}>{items.slice(0, 40).map((x) => <li key={x}>{x}</li>)}</ul>;
}

export default function App() {
  const [text, setText] = useState('a');
  const deferred = useDeferredValue(text);
  const stale = text !== deferred;
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type fast" />
      <span style={{ opacity: stale ? 1 : 0, marginLeft: 8, color: '#888' }}>rendering…</span>
      <SlowList text={deferred} />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you avoid re-renders with composition instead of memoization?

Why does React 18 StrictMode double-invoke your components and effects?