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
Continue with React Design Patterns
Save the full cheat sheet or work through every related task.