Restoring persisted state with useMachine hook not working

[GeospatialMax]

Hi all, currently experimenting with restoring a persisted state into a machine using the useMachine hook, but for some reason the state doesn't seem. to be restoring correctly.

Here's the code

  const mapMachineOptions: any = {
    devTools: process.env.NODE_ENV === 'development',
    services: {
      /// a couple of services
    },
    actions: {
      /// a couple of actions
    },
  };

  if (mapState === null) {
    mapMachineOptions.context = {
      ...mapMachine.context,
      activeMap: defaultBaseMap,
    };
  } else {
    mapMachineOptions.state = JSON.parse(mapState);
  }

  const [currentMachineState, sendtoMachine, mapMachineService] = useMachine(mapMachine, mapMachineOptions);

MapState is passed in as a prop and can either contain previously persisted state (when the machine was spun up before) or be empty. If we have previously existing state I am parsing it back to an object from the string and pass it into the useMachine hook along with the other machine options.

But the machine nonetheless spins up with the default state. Am I missing something?

[davidkpiano]

Please create a CodeSandbox (React template) for this. Thank you!

[GeospatialMax]

I created a CodeSandbox based on your suggested template and fortunately it is all working as expected there.

Unfortunately (for me) it is still broken in our own application. So the problem must be somewhere else, I will investigate further. Could it be that it falls over because the machine I want to restore the state for has a spawned machine? How will it deal with this when persisting the state?

Thanks for your help, @davidkpiano !

[davidkpiano]

Ah yeah, restoring spawned machines is tricky; see here for an event-sourcing approach: #1515

[GeospatialMax]

OK, thanks. What we typically did when we want the machine state to continue to exist even when the component gets unmounted is lifting the machine instantiation up to the parent component and pass it in as a prop to the child component where it can then be used with the useService hook.

- parent component spins up machine for child component (this can happen in the parent component's own machine)
- child component gets mounted and receives its machine from the parent component
- child component uses the machine through the `useService` hook

In our current case I wanted to try the persist/rehydrate approach as the machine in question has quite a lot of services and actions that are being assigned to the machine in the host component. I would have to export these otherwise so that they can be used in the parent component. But maybe that's nonetheless the easier approach.

Generally, even with a machine that has spawned actors, would you expect the state of the machine not be restored at all in this case (which is happening in our application)?

[davidkpiano]

Have you tried "hoisting" the machine outside of React components completely? Then you can useService() to access the state/send functions of the machine, and not have to worry about persistence, which adds additional complexity.

[GeospatialMax]

The machines are created dynamically based on information fetched in the parent react component, i.e. we have a couple of dashboards, each oft those has a map. So it would be difficult to hoist it outside of the React Component entirely I think.