Cursor rule

1---
2alwaysApply: false
3---
4 
5## Store Event Handlers in Refs
6 
7Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.
8 
9**Incorrect (re-subscribes on every render):**
10 
11```tsx
12function useWindowEvent(event: string, handler: (e) => void) {
13  useEffect(() => {
14    window.addEventListener(event, handler)
15    return () => window.removeEventListener(event, handler)
16  }, [event, handler])
17}
18```
19 
20**Correct (stable subscription):**
21 
22```tsx
23function useWindowEvent(event: string, handler: (e) => void) {
24  const handlerRef = useRef(handler)
25  useEffect(() => {
26    handlerRef.current = handler
27  }, [handler])
28 
29  useEffect(() => {
30    const listener = (e) => handlerRef.current(e)
31    window.addEventListener(event, listener)
32    return () => window.removeEventListener(event, listener)
33  }, [event])
34}
35```
36 
37**Alternative: use `useEffectEvent` if you're on latest React:**
38 
39```tsx
40import { useEffectEvent } from 'react'
41 
42function useWindowEvent(event: string, handler: (e) => void) {
43  const onEvent = useEffectEvent(handler)
44 
45  useEffect(() => {
46    window.addEventListener(event, onEvent)
47    return () => window.removeEventListener(event, onEvent)
48  }, [event])
49}
50```
51 
52`useEffectEvent` provides a cleaner API for the same pattern: it creates a stable function reference that always calls the latest version of the handler.
53