Is it better to send events straight to the intended actor, or send to "top-level" actor (fitting-engine) and have it direct events to the final intended actor?

[technoplato]

export default function GenericComponent(_props: PropTypes) {
  const theme = useTheme();

  /*
   * Definite opportunity to extract the below into hooks & useActorContext.
   * TODO for later if we ever keep this
   */
  const [state, send, service] = useActor(MOCK_GenericMachine, {
    input: { parent: undefined },
  });

  const childActor = useSelector(service, (snapshot) => snapshot.children['child-app']);
  const childState = useSelector(childActor, (snapshot) => snapshot);

  const isComponentConnected = useSelector(service, (snapshot) => snapshot.matches('Connected'));

  const { status: actionOneStatus, method: actionOne } = useActionOne();
  const { status: actionTwoStatus, method: actionTwo } = useActionTwo();
  const { status: actionThreeStatus, method: actionThree } = useActionThree();
  const { status: actionFourStatus, method: actionFour } = useActionFour();
  const { status: actionFiveStatus, method: actionFive } = useActionFive();

  const { data, generateData } = useData();
  const { values, generateValues } = useValues();

  useObserveEvents();

  const { getNextItem, processItem } = useNextItem();

  const [mode, setMode] = useState(0);
  const [value, setValue] = useState(100);
  const [quantity, setQuantity] = useState(10);

  const { width } = useWindowDimensions();

  const startProcess = () => {
    GenericManager.initProcess(60, 'default');
  };

  // ...

  <Button
    disabled={childState?.matches('Active')}
    style={{ width: '100%', marginHorizontal: MARGIN_HORIZONTAL }}
    // QUESTION: do we send this event to the childActor or the Parent Component (actor)
    onPress={() => childActor?.send({ type: 'child.start' })}
  >
    Start Child
  </Button>
}

[technoplato]

Another question that comes to my mind is how can we refactor our machines to remove the need to mount all of these similar looking hooks.