1---
2title: Use useDeferredValue for Expensive Derived Renders
3impact: MEDIUM
4impactDescription: keeps input responsive during heavy computation
5tags: rerender, useDeferredValue, optimization, concurrent
6---
7 
8## Use useDeferredValue for Expensive Derived Renders
9 
10When user input triggers expensive computations or renders, use `useDeferredValue` to keep the input responsive. The deferred value lags behind, allowing React to prioritize the input update and render the expensive result when idle.
11 
12**Incorrect (input feels laggy while filtering):**
13 
14```tsx
15function Search({ items }: { items: Item[] }) {
16  const [query, setQuery] = useState('')
17  const filtered = items.filter(item => fuzzyMatch(item, query))
18 
19  return (
20    <>
21      <input value={query} onChange={e => setQuery(e.target.value)} />
22      <ResultsList results={filtered} />
23    </>
24  )
25}
26```
27 
28**Correct (input stays snappy, results render when ready):**
29 
30```tsx
31function Search({ items }: { items: Item[] }) {
32  const [query, setQuery] = useState('')
33  const deferredQuery = useDeferredValue(query)
34  const filtered = useMemo(
35    () => items.filter(item => fuzzyMatch(item, deferredQuery)),
36    [items, deferredQuery]
37  )
38  const isStale = query !== deferredQuery
39 
40  return (
41    <>
42      <input value={query} onChange={e => setQuery(e.target.value)} />
43      <div style={{ opacity: isStale ? 0.7 : 1 }}>
44        <ResultsList results={filtered} />
45      </div>
46    </>
47  )
48}
49```
50 
51**When to use:**
52 
53- Filtering/searching large lists
54- Expensive visualizations (charts, graphs) reacting to input
55- Any derived state that causes noticeable render delays
56 
57**Note:** Wrap the expensive computation in `useMemo` with the deferred value as a dependency, otherwise it still runs on every render.
58 
59Reference: [React useDeferredValue](https://react.dev/reference/react/useDeferredValue)
60