리액트가 마침내 가장 큰 문제를 해결했습니다 (useEffectEvent)

useEffectEvent 의 핵심은 '언제 재실행하느냐' 와 '무엇을 읽느냐' 를 분리한 것.

function ChatRoom({ roomId, theme }) {
  const onMessage = useEffectEvent((msg) => {
    // 항상 최신 theme 을 본다
    showNotification(msg, theme);
  });

  useEffect(() => {
    const socket = createSocket(roomId);
    socket.on('message', onMessage); // 의존성에 넣지 않는다
    return () => socket.close();
  }, [roomId]); // roomId 만 진짜 반응 의존
}

과거에는 theme 을 의존성에 넣으면 매번 소켓이 재연결되고, 빼면 stale theme 이었다.

둘 다 '함수를 안정화' 하지만 목적이 다르다.

useCallback 은 참조 동일성 최적화, useEffectEvent 는 의존성 설계 도구. 헷갈리면 '자식에게 넘기나?' 로 판단 — 넘긴다면 useCallback, 이펙트에서만 쓴다면 useEffectEvent.

기존 코드에서 useEffectEvent 로 바꿔야 할 신호 세 가지:

1. useEffect 의존성 배열에서 특정 값을 일부러 빼고 // eslint-disable-next-line 주석
2. useRef 를 선언하고 렌더마다 ref.current = fn 으로 덮어씌우는 패턴
3. useCallback deps 가 매 렌더 바뀌어 실제로 캐시 효과가 없는 함수

이 세 패턴은 거의 그대로 useEffectEvent 로 정리된다.

[좋은 답변] React 가 런타임 에러 — '이펙트 내부에서만 호출 가능' 제약을 강제. 이는 반응성 제거 함수가 렌더 트리 밖으로 새면 버그 유발이 확정적이기 때문. 자식에 내려주려면 useCallback 을 써야 한다.

[좋은 답변] ref 패턴은 수동이라 업데이트를 잊으면 stale, 그리고 tearing 가능성. useEffectEvent 는 React 가 매 렌더 후 자동 갱신 + 의존성 시스템과 명시적 계약 + ESLint 가 오용 감지 — 세 가지 모두 수동 해법으로는 불가능.

[좋은 답변] disable 한 의존성이 (1) 반응 필요 — 배열에 넣어라, (2) 값만 읽기 — useEffectEvent 로 감싸라. 중간은 없다. ESLint 주석은 '의도를 문법으로 표현하지 못한 흔적'.