Avoid needless rerendering and deep prop drilling in React with machine service contexts

[VanTanev]

Example of how use Contexts in React that hold a machine service value, for good code organization and minimization of unnecessary renders using useSelector()

import { useInterpret, useService, useSelector } from '@xstate/react'

const MyMachineService = React.createContext()
const useMyMachineService = () => {
  const service = React.useContext(MyMachineService)
  if (!service) {
    throw new Error(`useMyMachineService() must be used in a child of <MyMachineProvider>`)
  }
  return service
}

const MyMachineProvider = (props) => {
  const service = useInterpret(myMachine)
  return <MyMachineService.Provider value={service}>{props.children}</MyMachineService.Provider>
}

const App = () => {
  return <MyMachineProvider>
    <SomeComponentThatCouldBeDeepInTheTree />
  </MyMachineProvider>
}

const SomeComponentThatCouldBeDeepInTheTree = () => {
  const service = useMyMachineService()

  // use service.send() to send events
  React.useEffect(() => {
    service.send({ type: 'TRIGGERED' })
  }, [someTrigger])

  // if you need only one value from the machine, use a selector
  const value = useSelector(service, React.useCallback(state => state.context.value, []))

  // or if you need the whole state, use `useService()`
  const [state] = useService(service)
  
  //...
}