Discussion on: "Just Use Props": An opinionated guide to React and XState

Couldn't you just use the same machine in both the parent and the child component? Since state machines are orthogonal to the component (rendering) hierarchy then they don't have to conform to it. (Presuming here that the useMachine hook will cause a re-render, of course.)

Like this:

import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';

/**
 * Types for the machine declaration
 */
type MachineContext = {};
type MachineEvent = { type: 'TOGGLE' };

const machine = createMachine<MachineContext, MachineEvent>({});

const ParentComponent = () => {
  const [state, send] = useMachine(machine);
  // ... some extra code that warrants using this macine in this component ...
  return (
    <ChildComponent />
  );
};

const ChildComponent = () => {
  const [state, send] = useMachine(machine);
  return (
    <button onClick={() => send('TOGGLE')}>
      {state.matches('open') ? 'Open' : 'Closed'}
    </button>
  );
};

Thus, state could be stored in the relevant component, but accessed from any other component (not just a child), without having to conform to passing props up and down the render tree. You'd also be utilising the full capacity of hooks:

Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

reactjs.org/docs/hooks-intro.html