React: What is useDeferredValue and when to use it?

useDeferredValue creates a deferred version of a value that React can update later (at lower priority). While the deferred value is being computed, the UI continues showing the old value — keeping the interface responsive.

How it works step-by-step:

1. User types in a search input → query updates immediately (urgent)
2. useDeferredValue(query) creates deferredQuery — it updates later (non-urgent)
3. The Results component uses deferredQuery → doesn't block typing
4. While React computes the new results, the old results stay visible

Complete code example:

1import { useState, useDeferredValue, useMemo } from "react";
2
3function SearchResults({ query }: { query: string }) {
4  const deferredQuery = useDeferredValue(query);
5  const isStale = query !== deferredQuery;
6
7  // Expensive computation with deferred value
8  const results = useMemo(() => {
9    if (!deferredQuery) return [];
10    // Simulate expensive filtering
11    return allItems.filter(item =>
12      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
13    );
14  }, [deferredQuery]);
15
16  return (
17    <div style={{ opacity: isStale ? 0.5 : 1, transition: "opacity 0.2s" }}>
18      <p>{results.length} results</p>
19      <ul>
20        {results.map(item => (
21          <li key={item.id}>{item.name}</li>
22        ))}
23      </ul>
24    </div>
25  );
26}
27
28function App() {
29  const [query, setQuery] = useState("");
30
31  return (
32    <div>
33      <input
34        value={query}
35        onChange={e => setQuery(e.target.value)}
36        placeholder="Search..."
37      />
38      <SearchResults query={query} />
39    </div>
40  );
41}

When to use:

• Search inputs with expensive result rendering
• Filtering large lists — keep old results visible while computing new ones
• Any input that triggers expensive rendering that would otherwise block typing

useDeferredValue vs useTransition: | Feature | useDeferredValue | useTransition | |---------|------------------|---------------| | Wraps | A value (like a prop) | A state update function | | Use case | Deferred re-rendering | Deferred state transitions | | Can be interrupted | Yes | Yes | | Shows stale data | Yes (old value while new computes) | Yes (old UI while new renders) |

Key points:

• The old value is shown while the new value is being computed
• You can show a stale indicator (like reduced opacity) to signal the update is in progress
• React automatically cleans up previous renders — no manual cleanup needed
• No need to manage pending state manually — the deferred value handles it