useEffectEvent는 Effect 안에서 부르되 의존성 배열(Dependency Array)에는 넣지 않는 이벤트 함수를 만드는 훅이다. 항상 최신 props·state를 읽지만, 그 값이 바뀐다고 Effect가 다시 실행되지는 않는다. React 19.2에서 정식이 됐다(2026 기준).
// 전: onConnect가 바뀔 때마다 연결을 끊었다 다시 맺는다
useEffect(() => {
const conn = createConnection(url)
conn.on('connected', () => onConnect(conn))
conn.connect()
return () => conn.disconnect()
}, [url, onConnect])
// 후: url이 바뀔 때만 재연결, onConnect는 항상 최신
const onConnected = useEffectEvent(onConnect)
useEffect(() => {
const conn = createConnection(url)
conn.on('connected', () => onConnected(conn))
conn.connect()
return () => conn.disconnect()
}, [url])- 핵심은 Effect 안의 로직을 둘로 나누는 것이다. 바뀌면 다시 동기화해야 하는 값은 의존성에 두고, 최신 값을 읽기만 하면 되는 부분만 Effect Event로 뺀다
- 의존성 경고를 숨기는 용도로 쓰면 안 된다. 페이지 방문 로그를
pageUrl없이[]로 돌리면 URL(Uniform Resource Locator)이 바뀌어도 로그가 안 남는다. 다시 실행돼야 할 값이면 의존성에 둔다 - 제약
- Effect 안이나 다른 Effect Event 안에서만 호출한다. 렌더 중에 부르거나 다른 컴포넌트·훅에 넘기지 않는다
- 반환된 함수를 의존성 배열에 넣지 않는다
- 이벤트 핸들러나 자식에게 넘길 콜백이 필요하면 일반 함수(또는
useCallback)를 쓴다
Effect를 아예 안 쓰는 방법이 먼저다(Effect가 필요 없는 경우). 배경은 부수 효과와 Effect.