1---
2title: Use useRef for Transient Values
3impact: MEDIUM
4impactDescription: avoids unnecessary re-renders on frequent updates
5tags: rerender, useref, state, performance
6---
7 
8## Use useRef for Transient Values
9 
10When a value changes frequently and you don't want a re-render on every update (e.g., mouse trackers, intervals, transient flags), store it in `useRef` instead of `useState`. Keep component state for UI; use refs for temporary DOM-adjacent values. Updating a ref does not trigger a re-render.
11 
12**Incorrect (renders every update):**
13 
14```tsx
15function Tracker() {
16  const [lastX, setLastX] = useState(0)
17 
18  useEffect(() => {
19    const onMove = (e: MouseEvent) => setLastX(e.clientX)
20    window.addEventListener('mousemove', onMove)
21    return () => window.removeEventListener('mousemove', onMove)
22  }, [])
23 
24  return (
25    <div
26      style={{
27        position: 'fixed',
28        top: 0,
29        left: lastX,
30        width: 8,
31        height: 8,
32        background: 'black',
33      }}
34    />
35  )
36}
37```
38 
39**Correct (no re-render for tracking):**
40 
41```tsx
42function Tracker() {
43  const lastXRef = useRef(0)
44  const dotRef = useRef<HTMLDivElement>(null)
45 
46  useEffect(() => {
47    const onMove = (e: MouseEvent) => {
48      lastXRef.current = e.clientX
49      const node = dotRef.current
50      if (node) {
51        node.style.transform = `translateX(${e.clientX}px)`
52      }
53    }
54    window.addEventListener('mousemove', onMove)
55    return () => window.removeEventListener('mousemove', onMove)
56  }, [])
57 
58  return (
59    <div
60      ref={dotRef}
61      style={{
62        position: 'fixed',
63        top: 0,
64        left: 0,
65        width: 8,
66        height: 8,
67        background: 'black',
68        transform: 'translateX(0px)',
69      }}
70    />
71  )
72}
73```
74