Why doesn't @xstate/react useMachine rerender with change in subactor?

[brandonchinn178]

I'm invoking an actor in a state, but sending events to the actor doesn't cause the overall component to rerender. What am I doing wrong?

Minimal repro

function App() {
  const [state, _, actor] = useMachine(
    createMachine({
      initial: 'start',
      states: {
        start: {
          invoke: {
            src: createMachine({
              context: { counter: 1 },
              on: {
                INC: {
                  actions: assign({
                    counter: ({ context }) => context.counter + 1,
                  })
                }
              }
            }),
            id: 'start',
          },
        },
      },
    })
  )

  return (
    <>
      <p>{state.children.start.getSnapshot().context.counter}</p>
      <button onClick={() => state.children.start.send({ type: 'INC' })}>Increment</button>
    </>
  )
}

Expected behavior

Clicking button shows new counter

Actual behavior

Counter is not updated

[Andarist]

Only the top-level actor gets subscribed in this situation.

You should do this:

const [state, _, actorRef] = useMachine(parentMachine);
const childRef = useSelector(actorRef, s => s.children.start);
const counter = useSelector(childRef, s => s.context.counter);

[brandonchinn178]

Does this work?

function App() {
  const [state, _, actorRef] = useMachine(
    createMachine({
      initial: 'start',
      states: {
        start: {
          invoke: {
            src: createMachine({
              context: { counter: 1 },
              on: {
                INC: {
                  actions: assign({
                    counter: ({ context }) => context.counter + 1,
                  })
                }
              }
            }),
            id: 'start',
          },
        },
      },
    })
  )
  const childRef = useSelector(actorRef, s => s.children.start)
  const counter = useSelector(childRef, s => s.context.counter)

  return (
    <>
      <p>{counter}</p>
      {/* Same thing happens with childRef.send() */}
      <button onClick={() => state.children.start.send({ type: 'INC' })}>Increment</button>
    </>
  )
}

[Andarist]

The problem was likely related to the fact that you are using createMachine within the component. This works just fine as far as I can see: https://codesandbox.io/p/sandbox/focused-gagarin-9v4fww

[brandonchinn178]

Perfect, that solves that mystery. But I'm still having issues with my overall goal. What I want is to autosave the state to localStorage on any change to the root actor, including any actors invoked in the hierarchy of actors.

My first approach with your solution is to do

const [_, _, actorRef] = useMachine(machine)

const serialized = JSON.stringify(actorRef.getPersistedSnapshot())
useEffect(() => {
  localStorage.setItem('foo', serialized)
}, [serialized])

const actorRef1 = useSelector(actorRef, s => s.children.actor1)
const context1 = useSelector(actorRef1, s => s.context)

const actorRef2 = useSelector(actorRef, s => s.children.actor2)
const context2 = useSelector(actorRef2, s => s.context)

This should correctly rerender and autosave. This doesn't handle recursive actors (e.g. children of actorRef1), and it would be nice to not have to repeat this for every child, but this is fine for my current usecase.

The biggest issue with this is that the two subactors are invoked in different states. I wanted this design so I can isolate the state of the two subactors (ref), but this means that exactly one of s.children.{actor1,actor2} will be undefined, and useSelector will fail when passing undefined as the first argument. I can't conditionally call useSelector because of React's rules of hooks.

I'm completely new to xstate, so I might be going about this wrong. What is the best way to do this?

[davidkpiano]

Right now, you can use the inspect API to do this. In plain XState, it's this:

const actor = createActor(machine, {
  inspect: (inspEvent) => {
    // something happened
    localStorage.setItem('state', actor.getPersistedSnapshot())
// ...

With React:

const [/* ... */] = useMachine(machine, {
  inspect: (inspEvent) => {
    // same logic
// ...

[brandonchinn178]

Perfect! I had to modify your code, because you can't reference actor inside of the inspect function (because it's not defined yet). I ended up with:

const [state, _, actorRef] = useMachine(machine, {
  systemId: 'root',
  inspect: (event) => {
    if (event.type !== '@xstate.snapshot') {
      return
    }

    if (event.event.type.startsWith('xstate.')) {
      return
    }

    const root = event.actorRef.system.get('root')
    localStorage.setItem('state', root.getPersistedSnapshot())
  },
})

It feels a bit roundabout to have to register a system ID and refetch it back, but it's good enough for my purposes.

Thank you both so much! @Andarist @davidkpiano