1---
2title: useEffectEvent for Stable Callback Refs
3impact: LOW
4impactDescription: prevents effect re-runs
5tags: advanced, hooks, useEffectEvent, refs, optimization
6---
7 
8## useEffectEvent for Stable Callback Refs
9 
10Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
11 
12**Incorrect (effect re-runs on every callback change):**
13 
14```tsx
15function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
16  const [query, setQuery] = useState('')
17 
18  useEffect(() => {
19    const timeout = setTimeout(() => onSearch(query), 300)
20    return () => clearTimeout(timeout)
21  }, [query, onSearch])
22}
23```
24 
25**Correct (using React's useEffectEvent):**
26 
27```tsx
28import { useEffectEvent } from 'react';
29 
30function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
31  const [query, setQuery] = useState('')
32  const onSearchEvent = useEffectEvent(onSearch)
33 
34  useEffect(() => {
35    const timeout = setTimeout(() => onSearchEvent(query), 300)
36    return () => clearTimeout(timeout)
37  }, [query])
38}
39```
40