Cursor rule

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