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