Error: A function wrapped in useEffectEvent can't be called during rendering

What causes this error

useEffectEvent exists specifically to extract non-reactive logic out of an Effect — code that needs the latest values but shouldn't itself re-trigger the Effect when those values change. Because of that contract, React only allows the returned function to be invoked from inside an Effect (or a nested Effect Event); calling it during render breaks the guarantee it's built on.

The Fix

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // reads latest theme, doesn't need it as a dep
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected()); // called from inside the Effect — correct
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // theme is intentionally omitted — onConnected always sees the latest value
}

Common causes / variations

• Calling the Effect Event directly in the component body instead of inside `useEffect`
• Passing the Effect Event down as a prop and calling it from an unrelated render path
• Trying to use `useEffectEvent` as a general-purpose stable callback for event handlers (that's what `useCallback` is for)

Related errors

See also: React Hook useEffect has a missing dependency, Too many re-renders.