How do I use 'onTransition' when I'm using 'useMachine'?

[felippenardi]

This is the way I'm starting my machine in React:

  const [state, send] = useMachine(machine, { devTools: true })

How do I hook up a log? I found that apparently I should use the onTransition method, but I can't find where should I get it from.

[f-elix]

The service is returned as a 3rd value of the tupple. You can then use onTransition directly on it.

[davidkpiano]

1. onTransition is almost the same as just "reacting" to state changes:

const [state, send] = useMachine(machine);

useEffect(() => {
  // called whenever the state changes
  console.log(state);
}, [state]);

2. You also have access to the service directly as the third item in the tuple:

const [state, send, service] = useMachine(machine);

useEffect(() => {
  const handler = (state) => { console.log(state) }

  service.onTransition(handler);

  return () => { service.off(handler); }
}, []);

I'd strongly recommend option 1, as it is simpler.

[Andarist]

@felippenardi keep in mind that those 2 solutions are not 100% equivalent though because of how React setState batching works - the first approach might "miss" some states.

[BrunoQuaresma]

Is there a way to get the event during onTransition? Use case: Having a machine with two states, "started" and "idle", I would like to execute an outside action from the UI when "started" became "idle", something like a "onIdle" callback.