1---
2title: Use Transitions for Non-Urgent Updates
3impact: MEDIUM
4impactDescription: maintains UI responsiveness
5tags: rerender, transitions, startTransition, performance
6---
7 
8## Use Transitions for Non-Urgent Updates
9 
10Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
11 
12**Incorrect (blocks UI on every scroll):**
13 
14```tsx
15function ScrollTracker() {
16  const [scrollY, setScrollY] = useState(0)
17  useEffect(() => {
18    const handler = () => setScrollY(window.scrollY)
19    window.addEventListener('scroll', handler, { passive: true })
20    return () => window.removeEventListener('scroll', handler)
21  }, [])
22}
23```
24 
25**Correct (non-blocking updates):**
26 
27```tsx
28import { startTransition } from 'react'
29 
30function ScrollTracker() {
31  const [scrollY, setScrollY] = useState(0)
32  useEffect(() => {
33    const handler = () => {
34      startTransition(() => setScrollY(window.scrollY))
35    }
36    window.addEventListener('scroll', handler, { passive: true })
37    return () => window.removeEventListener('scroll', handler)
38  }, [])
39}
40```
41