Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use useRef for Transient Values
6 
7When 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.
8 
9**Incorrect (renders every update):**
10 
11```tsx
12function Tracker() {
13  const [lastX, setLastX] = useState(0)
14 
15  useEffect(() => {
16    const onMove = (e: MouseEvent) => setLastX(e.clientX)
17    window.addEventListener('mousemove', onMove)
18    return () => window.removeEventListener('mousemove', onMove)
19  }, [])
20 
21  return (
22    <div
23      style={{
24        position: 'fixed',
25        top: 0,
26        left: lastX,
27        width: 8,
28        height: 8,
29        background: 'black',
30      }}
31    />
32  )
33}
34```
35 
36**Correct (no re-render for tracking):**
37 
38```tsx
39function Tracker() {
40  const lastXRef = useRef(0)
41  const dotRef = useRef<HTMLDivElement>(null)
42 
43  useEffect(() => {
44    const onMove = (e: MouseEvent) => {
45      lastXRef.current = e.clientX
46      const node = dotRef.current
47      if (node) {
48        node.style.transform = `translateX(${e.clientX}px)`
49      }
50    }
51    window.addEventListener('mousemove', onMove)
52    return () => window.removeEventListener('mousemove', onMove)
53  }, [])
54 
55  return (
56    <div
57      ref={dotRef}
58      style={{
59        position: 'fixed',
60        top: 0,
61        left: 0,
62        width: 8,
63        height: 8,
64        background: 'black',
65        transform: 'translateX(0px)',
66      }}
67    />
68  )
69}
70```
71