useEffectEvent

const onEvent = useEffectEvent(callback)

• 레퍼런스
  • useEffectEvent(callback)
• 사용법
  • 최신 props와 state를 읽기
  • Using a timer with latest values
  • Using an event listener with latest values
  • Avoid reconnecting to external systems
  • Using Effect Events in custom Hooks
• Troubleshooting
  • I’m getting an error: “A function wrapped in useEffectEvent can’t be called during rendering”
  • I’m getting a lint error: “Functions returned from useEffectEvent must not be included in the dependency array”
  • I’m getting a lint error: ”… is a function created with useEffectEvent, and can only be called from Effects”

레퍼런스

useEffectEvent(callback)

Effect 이벤트를 선언하기 위해 컴포넌트의 최상위 레벨에서 useEffectEvent를 호출하세요. Effect 이벤트는 useEffect와 같이 Effect 내부에서 호출 가능한 함수입니다.

import { useEffectEvent, useEffect } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });
}

아래에서 더 많은 예시를 확인하세요.

매개변수

• callback: Effect 이벤트를 위한 로직을 포함하는 함수입니다. useEffectEvent로 Effect 이벤트를 정의했을 때, callback은 실행할 때마다 항상 최신의 props와 state 값을 참조합니다. 이를 통해 오래된 클로저 문제를 피할 수 있습니다.

반환값

Effect 이벤트 함수를 반환합니다. useEffect, useLayoutEffect 또는 useInsertionEffect 내부에서 이 함수를 호출할 수 있습니다.

주의 사항

• Effect 내부에서만 호출하세요: Effect 이벤트는 오로지 Effect 내부에서만 호출해야 합니다. 그것을 사용하는 Effect 이전에 그것을 정의하세요. 다른 컴포넌트나 훅으로 그것을 전달하지 마세요. eslint-plugin-react-hooks 린터(버전 6.1.1 또는 최신)는 Effect 이벤트를 잘못된 맥락에서 호출하는 것을 방지하기 위해 이 제한을 강제할 것입니다.
• 의존성 지름길이 아닙니다: Effect의 의존성 배열에 의존성을 적는 것을 피하기 위해 useEffectEvent를 사용하지 마세요. 이것은 버그를 숨기고 코드를 이해하는 것을 어렵게 합니다. 명시적으로 의존성을 작성하거나 필요한 경우 이전 값을 비교하기 위해 ref를 사용하세요.
• 비반응형 로직을 위해 사용하세요: 변하는 값에 의존하지 않는 로직을 추출하기 위해서만 useEffectEvent를 사용하세요.

// 🔴 Wrong: including Effect Event in dependencies
useEffect(() => {
  onSomething();
}, [onSomething]); // ESLint will warn about this

사용법

최신 props와 state를 읽기

전형적으로, Effect 내부에서 반응형 값을 읽을 때, 의존성 배열에 그것을 포함해야 합니다. 이것은 값이 바뀔 때 마다 Effect가 다시 동작하도록 하고, 이것은 보통 바람직한 동작입니다.

그러나 몇몇의 사례에서, 이 값들이 변할 때 Effect가 다시 동작하지 않고 Effect 내부에서 가장 최신의 props 또는 state를 읽고 싶어할 수 있습니다.

Effect 내부에서 이 값들을 반응형으로 만드는 것 없이 최신 props와 state를 읽기 위해 Effect 이벤트 내부에 그것들을 포함하세요.

const onConnected = useEffectEvent(() => {
  if (!muted) {
    showNotification('Connected!');
  }
});

useEffectEvent accepts an event callback and returns an Effect Event. The Effect Event is a function that can be called inside of Effects without re-connecting the Effect:

useEffect(() => {
  const connection = createConnection(roomId);
  connection.on('connected', onConnected);
  connection.connect();
  return () => {
    connection.disconnect();
  }
}, [roomId]);

Since onConnected is an Effect Event, muted and onConnect are not in the Effect dependencies.

// 🔴 Wrong: Using Effect Events to hide dependencies
const logVisit = useEffectEvent(() => {
  log(pageUrl);
});

useEffect(() => {
  logVisit()
}, []); // Missing pageUrl means you miss logs

Using a timer with latest values

When you use setInterval or setTimeout in an Effect, you often want to read the latest values from render without restarting the timer whenever those values change.

This counter increments count by the current increment value every second. The onTick Effect Event reads the latest count and increment without causing the interval to restart:

Try changing the increment value while the timer is running. The counter immediately uses the new increment value, but the timer keeps ticking smoothly without restarting.

Using an event listener with latest values

When you set up an event listener in an Effect, you often need to read the latest values from render in the callback. Without useEffectEvent, you would need to include the values in your dependencies, causing the listener to be removed and re-added on every change.

This example shows a dot that follows the cursor, but only when “Can move” is checked. The onMove Effect Event always reads the latest canMove value without re-running the Effect:

Toggle the checkbox and move your cursor. The dot responds immediately to the checkbox state, but the event listener is only set up once when the component mounts.

Avoid reconnecting to external systems

A common use case for useEffectEvent is when you want to do something in response to an Effect, but that “something” depends on a value you don’t want to react to.

In this example, a chat component connects to a room and shows a notification when connected. The user can mute notifications with a checkbox. However, you don’t want to reconnect to the chat room every time the user changes the settings:

Try switching rooms. The chat reconnects and shows a notification. Now mute the notifications. Since muted is read inside the Effect Event rather than the Effect, the chat stays connected.

Using Effect Events in custom Hooks

You can use useEffectEvent inside your own custom Hooks. This lets you create reusable Hooks that encapsulate Effects while keeping some values non-reactive:

In this example, useInterval is a custom Hook that sets up an interval. The callback passed to it is wrapped in an Effect Event, so the interval does not reset even if a new callback is passed in every render.

Troubleshooting

I’m getting an error: “A function wrapped in useEffectEvent can’t be called during rendering”

This error means you’re calling an Effect Event function during the render phase of your component. Effect Events can only be called from inside Effects or other Effect Events.

function MyComponent({ data }) {
  const onLog = useEffectEvent(() => {
    console.log(data);
  });

  // 🔴 Wrong: calling during render
  onLog();

  // ✅ Correct: call from an Effect
  useEffect(() => {
    onLog();
  }, []);

  return <div>{data}</div>;
}

If you need to run logic during render, don’t wrap it in useEffectEvent. Call the logic directly or move it into an Effect.

I’m getting a lint error: “Functions returned from useEffectEvent must not be included in the dependency array”

If you see a warning like “Functions returned from useEffectEvent must not be included in the dependency array”, remove the Effect Event from your dependencies:

const onSomething = useEffectEvent(() => {
  // ...
});

// 🔴 Wrong: Effect Event in dependencies
useEffect(() => {
  onSomething();
}, [onSomething]);

// ✅ Correct: no Effect Event in dependencies
useEffect(() => {
  onSomething();
}, []);

Effect Events are designed to be called from Effects without being listed as dependencies. The linter enforces this because the function identity is intentionally not stable. Including it would cause your Effect to re-run on every render.

I’m getting a lint error: ”… is a function created with useEffectEvent, and can only be called from Effects”

If you see a warning like ”… is a function created with React Hook useEffectEvent, and can only be called from Effects and Effect Events”, you’re calling the function from the wrong place:

const onSomething = useEffectEvent(() => {
  console.log(value);
});

// 🔴 Wrong: calling from event handler
function handleClick() {
  onSomething();
}

// 🔴 Wrong: passing to child component
return <Child onSomething={onSomething} />;

// ✅ Correct: calling from Effect
useEffect(() => {
  onSomething();
}, []);

Effect Events are specifically designed to be used in Effects local to the component they’re defined in. If you need a callback for event handlers or to pass to children, use a regular function or useCallback instead.