useEffectEvent Hook in React

useEffectEvent

useEffectEvent is a special Hook used to extract this non-reactive logic out of your Effect. This is an experimental API that has not yet been released in a stable version of React.

---

Why We Need useEffectEvent

function ChatRoom({ roomId, theme }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);

    connection.on("connected", () => {
      showNotification("Connected!", theme);
    });

    connection.connect();

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

In the above example, imagine that you want to show a notification when the user connects to the chat. You read the current theme (dark or light) from the props so that you can show the notification in the correct color.

When the roomId changes, the chat re-connects as you would expect. But since theme is also a dependency, the chat also re-connects every time you switch between the dark and the light theme. In other words, we don’t want the line showNotification("Connected!", theme) to be reactive, even though it is inside an Effect (which is reactive).

useEffectEvent can be used in this instance to extract this non-reactive logic out of your Effect. Here, onConnected is called an Effect Event. It’s a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always “sees” the latest values of your props and state.

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

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on("connected", () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
    // theme is removed from the dependency
  }, [roomId]);
}

---

Limitations

Effect Events are very limited in how you can use them:

• Only call them from inside Effects.
• Never pass them to other components or Hooks.