XState global state machine hook

GlobalStateProvider.tsx

import { createContext } from 'react';
import { InterpreterFrom } from 'xstate';
import { useInterpret } from '@xstate/react';

import { someMachine } from './someMachine';

export const GlobalStateContext = createContext({ someService: {} as InterpreterFrom<typeof someMachine> });

export const GlobalStateProvider = (props: React.PropsWithChildren) => {
  const someService = useInterpret(someMachine);

  return (
    <GlobalStateContext.Provider value={{ someService }}>
      {props.children}
    </GlobalStateContext.Provider>
  );
};

useSomeMachine.tsx

import { useContext } from 'react';
import { useSelector } from '@xstate/react';
import type { StateFrom } from 'xstate';

import { GlobalStateContext } from '../GlobalStateProvider';
import type { someMachine } from './someMachine';

export function useSomeMachine() {
  const context = useContext(GlobalStateContext);

  function select<T>(cb: (state: StateFrom<typeof someMachine>) => T): T {
    return useSelector(context.someService, cb);
  }

  return { select, send: context.someService.send };
}