Using EventEmitter in React

Carlos — Fri, 03 Mar 2023 17:32:18 +0000

I have an issue where handlers subscribed to a custom event see all the updated state (from calls to setSomething()) except the last one that was set. Specifically:

const [counter1, setCounter1] = useState(1);
const [counter2, setCounter2] = useState(1);

const increment = useCallback(async () => {
  events.emit('beforeIncrement');

  await someAsyncAction();  // <-- There's an async call.

  setCounter1((x: number) => x + 1);
  setCounter2((x: number) => x + 1);

  // React 17:
  //    Handlers of the following event will see counter1 updated value but not counter2.
  // React 18 with Automatic Batching:
  //    Handlers of the following event will not see see counter1 or counter2 updated value.
  // What is the best way to emit an event here and ensure that handlers see the updated state?
  //    setTimeout(() => events.emit('afterIncrement')) ??

  events.emit('afterIncrement');
}, []);

The following repo demonstrates this behavior:

https://github.com/cmermingas/event-emitter-react-17

Why is this happening?
What is the right way to emit an event to ensure that handlers have access to all the updated state?

Thanks in advance!

[edit]

The example I provided is a simplified version of the real situation. A more generic description would be:

const doWork = useCallback(async () => {
  events.emit('beforeWork');

  // Asynchronous calls where React state gets updated.

  events.emit('afterWork');
}, []);

The Asynchronous calls section triggers state updates, possibly outside of the body of this callback.

I want all afterWork handlers to have the most up-to-date state from React. I imagine an API like this:

const doWork = useCallback(async () => {
  events.emit('beforeWork');

  // Asynchronous calls / Promise chains here
  // where React state gets updated.

  // Work is done. When React has updated, emit an event:

  afterReactWork(() => events.emit('afterWork'));
}, []);

DEV Community: Carlos

Using EventEmitter in React