useDeferredValue in React

From the React Design Patterns cheat sheet · Concurrent Rendering · verified Jul 2026

useDeferredValue

Defer rendering of expensive UI based on a value while keeping inputs responsive

jsx

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ResultsList query={deferredQuery} className={isStale ? 'stale' : ''} />
    </>
  );
}

💡 useDeferredValue defers a VALUE; useTransition defers an UPDATE - pick based on what you control

⚡ Always memoize the expensive child - otherwise React still re-renders it on every keystroke

📌 Compare value !== deferredValue to detect stale state and show a visual hint

🟢 React renders twice: once with the old value, then again in the background with the new one

useDeferredValueconcurrentperformance

More React tasks

useTransition

Back to the full React Design Patterns cheat sheet