출처 : nico.fyi - Quick look into the useEffectEvent (2025.10.2)

✼✼ disclaimer ✼✼ 본 글은 AI 번역 후 직접 검수하여 작성했습니다. 효율적인 정보 전달을 위해 AI 번역을 활용하되, 부자연스러운 표현은 수정했습니다. 번역 오류가 있을 수 있으니 정확한 내용은 원문을 확인하시기 바랍니다.

React가 새롭게 19.2.0 버전을 내놓으면서 useEffectEvent라는 신규 훅이 추가됐다. 공식 문서 설명에 따르면, Effect 내부의 반응성 없는 로직을 Effect Event라는 재사용 가능한 함수로 분리해낼 수 있게 해주는 훅이다.

Dan Abramov와 짧게 대화를 나눈 덕분에, 처음에 내가 이 훅을 잘못 이해하고 있었다는 걸 알게 됐다.

처음엔 최신 state와 props를 항상 볼 수 있는 '안정적인' 함수를 만드는 방법이라 생각했다. 그런데 Dan의 설명을 듣고 보니, 실제로는 '불안정한' 함수를 만드는 것이었다. 쉽게 말하면 이 훅은 다음 두 가지를 동시에 만족하는 함수를 만들어낸다:

항상 최신 state와 props를 참조
함수가 "불안정"함에도 불구하고, 이 함수를 포함한 Effect가 재실행되지 않음

아래 예시를 보자. React 공식 문서에서 가져온 코드다. 32-34번 줄에서 showNotification 함수를 useEffectEvent로 감싸서 notify 함수를 만들었다. notify 함수는 항상 최신 theme 값을 사용하기 때문에 "불안정"하다. 그런데 38번 줄의 useEffect 훅 안에서 사용되더라도, theme 값이 바뀔 때마다 notify 함수가 변경되는데도 useEffect가 재실행되지 않는다. 새 eslint 규칙 덕분에, notify 함수를 useEffect의 의존성 배열(44번 줄)에 포함시킬 필요도 없다.

'use client'
import { useEffect, useState, useEffectEvent } from 'react'

const createConnection = (serverUrl: string, roomId: string) => {
  return {
    on: (eventName: string, callback: () => void) => {
      console.log(`Event ${eventName} occurred: ${serverUrl} and roomId: ${roomId}`)
      callback()
    },
    connect: () => {
      console.log(`Connected to server: ${serverUrl} and roomId: ${roomId}`)
    },
    disconnect: () => {
      console.log(`Disconnected from server: ${serverUrl} and roomId: ${roomId}`)
    },
  }
}

const serverUrl = 'wss://example.com'
const roomIds = ['123', '456', '789']
const themes = ['light', 'dark']

const showNotification = (message: string, theme: string) => {
  console.log(`Notification: ${message} with theme: ${theme}`)
}

export default function Page() {
  const [theme, setTheme] = useState<string>(themes[0] || '')
  const [roomId, setRoomId] = useState<string>(roomIds[0] || '')

  const notify = useEffectEvent((message: string) => { // 32번 줄 - notify 함수
    showNotification(message, theme)                   // 33번 줄
  })                                                   // 34번 줄

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId)
    connection.on('connected', () => notify('Connected!')) // 38번 줄 - useEffect 훅 안에서 사용
    connection.connect()
    return () => {
      connection.disconnect()
    }
  }, [roomId])                         // 44번 줄 - 의존성 배열

  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        {themes.map((theme) => (
          <option key={theme} value={theme}>
            {theme}
          </option>
        ))}
      </select>
      <select value={roomId} onChange={(e) => setRoomId(e.target.value)}>
        {roomIds.map((roomId) => (
          <option key={roomId} value={roomId}>
            {roomId}
          </option>
        ))}
      </select>
      {`ChatRoom: ${serverUrl} and roomId: ${roomId} and theme: ${theme}`}
    </div>
  )
}

이 예시를 보면서, useEffectEvent 훅 없이도 똑같이 구현할 수 있지 않을까 싶었다. 그냥 notify 함수를 useEffect 밖에 만들고 의존성 배열에 넣지 않으면 되는 거 아닐까? eslint가 의존성 누락을 경고하긴 하겠지만, 무시하면 그만 아닐까 생각했다.

export default function Page() {
  const [theme, setTheme] = useState<string>(themes[0] || "");
  const [roomId, setRoomId] = useState<string>(roomIds[0] || "");

  const notify = (message: string = "Connected!") => {   // notify 함수
    showNotification(message, theme);
  };

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on("connected", () => notify("Connected!"));
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);           // 의존성 배열

  return (
    // ...위와 동일
  );
}

그리고 어느 정도는 맞았다. 처음에 theme이 light였다가 dark로 바꿨을 때, 예상대로 연결이 다시 맺어지지 않았다. 다른 roomId 값을 선택하면 연결이 재개되고 notify 함수가 호출되면서, 알림이 dark 값과 함께 표시됐다. 의도한 대로 동작하는 것처럼 보였다.

하지만 Dan이 지적한 건, 이 예시가 겉보기엔 제대로 동작하는 것 같지만 사실 notify 함수는 최신 theme 값을 보지 못한다는 점이었다. 이걸 증명하기 위해, theme 값이 바뀐 뒤에 notify 함수를 호출해보라고 했다. 그래서 연결이 수립된 후 주기적으로 notify 함수를 호출하도록 코드를 수정했다(15-17번 줄).

export default function Page() {
  const [theme, setTheme] = useState<string>(themes[0] || "");
  const [roomId, setRoomId] = useState<string>(roomIds[0] || "");

  const notify = (message: string = "Connected!") => {
    showNotification(message, theme);
  };

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on("connected", () => notify("Connected!"));
    connection.connect();

    const timer = setInterval(() => {              // 15번 줄 - 주기적으로 notify 함수 호출
      notify("Timer");                             // 16번 줄
    }, 5000);                                      // 17번 줄

    return () => {
      connection.disconnect();
      clearInterval(timer);
    };
  }, [roomId]);

  return (
    // ...위와 동일
  );
}

Dan의 설명대로, Effect 안의 notify 함수는 변하지 않기 때문에 최신 theme 값을 절대 보지 못한다. theme 값을 dark로 바꿔도, Effect 안의 notify 함수는 여전히 light 값을 참조한다. 이건 명백한 버그고, notify 함수를 useEffectEvent 훅으로 감싸기만 하면 간단히 해결된다.

export default function Page() {
  const [theme, setTheme] = useState<string>(themes[0] || "");
  const [roomId, setRoomId] = useState<string>(roomIds[0] || "");

  {/* useEffectEvent 사용 */}
  const notify = useEffectEvent((message: string = "Connected!") => {   
    showNotification(message, theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on("connected", () => notify("Connected!"));
    connection.connect();

    const timer = setInterval(() => {
      notify("Timer");
    }, 5000);

    return () => {
      connection.disconnect();
      clearInterval(timer);
    };
  }, [roomId]);

  return (
    // ...위와 동일
  );
}

이제 항상 최신 state와 props를 참조하면서도, 그 함수를 포함한 Effect가 재실행되지 않는 함수를 사용할 수 있게 됐다. 앞으로 나와 다른 개발자들이 이 훅을 어떻게 활용할지 기대된다.

[FE/react] React 19.2의 useEffectEvent 훑어보기