useMachine.js

import { useState, useMemo, useEffect } from "react";
import { interpret } from "xstate/lib/interpreter";

export default function useMachine(machine, { log = false } = {}) {
  const [current, setCurrent] = useState(machine.initialState);

  const service = useMemo(() => interpret(machine), []);

  useEffect(() => {
    service.onTransition(setCurrent).start();
    return () => service.stop();
  }, []);

  useEffect(
    () => {
      if (log) {
        console.group(current.value);
        console.log("event", current.event);
        console.log("state:", current.value);
        console.log("next: ", current.nextEvents.join(", "));
        console.log("context", current.context);
        console.groupEnd(current.value);
      }
    },
    [log, current.value]
  );

  return [current, service.send];
}