@xstate/react useMachine doesn't force a rerender when a state transitions to itself with a new payload

[pakoito]

I use the payload to make players go through different stages of an Arcade mode. Each stage has a new payload for the enemies. What I am finding is that transitioning from a "stage" to itself with a new payload isn't forcing a rerender, which means it doesn't transition to a new state.

const machine = {
 ...
  initial: 'player',
  states: {
    player: {
      entry: ['reset'],
      on: {
        PLAYER: { target: 'play' }
      }
    },
    play: {
      entry: ['bumpVictories'],
      on: {
        WIN: { target: 'play'}, <<<<<<<<<<------------- THIS TRANSITION
        LOSE: { target: 'defeat' }
      }
    },
 ....
  }
}

const [state, send] = useMachine(machine, { devTools: true });

switch (true) {
    case state.matches({ arcade: 'play' }): {
      return <SomeComponent
         ....
        game={state.event.game}
        onGameEnd={(isVictory) => {
          send(isVictory ? 'WIN' : 'LOSE', { game: newGame() });
        }}
      />;
    }
   ....
}

I am sure I can make it work with an additional transient state, but I am also unable to force a re-render when that state has always clauses. The machine doesn't transition to the state after the transient. See #3245

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[pakoito]

Sure! The repo is https://github.com/pakoito/buildmancer/ and there's a build running at https://pakoito.github.io/buildmancer/

State machine
https://github.com/pakoito/buildmancer/blob/8b518bf14eb0b66e1b7bc3721e0af7001688d477/src/menuStateMachine.ts#L72-L81

Component using the Hook
https://github.com/pakoito/buildmancer/blob/8b518bf14eb0b66e1b7bc3721e0af7001688d477/src/App.tsx#L73-L83

The repro steps are:

After using yarn start and opening the browser on localhost:3000/buildmancer
Click on ARCADE -> Click on "This is Me!" at the bottom -> Click on "GGWP" to force the transition that doesn't happen.

[pakoito]

Video of the repro steps

[pakoito]

For this particular case I believe you're better off adding a test for this use case, as it isn't covered by the current suite: https://github.com/statelyai/xstate/blob/main/packages/xstate-react/test/useMachine.test.tsx

Worst case you prove me wrong and I have to go back and reassess what I'm doing wrong, and you leave with 1 additional test :D

[davidkpiano]

This won't cause a rerender because the state doesn't change (transitions to self) and there is nothing in the state to indicate that the component should rerender (such as different state value, changed context, new actions...)

One way to show the state as "changed" with a self-transition is to perform an action:

WIN: { target: 'play', actions: 'someAction' }

In general, this is an indication of something missing in your logic. Can you answer why you want this self-transition to cause a rerender? (Haven't had a chance to dive into the code)

[pakoito]

Yep! I have a "Fight" scene, and once the player beats the enemy, a new "Fight" scene has to come up. The fight state is the payload of the event, as in which enemy you're fighting, resetting the player health, and other state changes.

If this was Street Fighter it'd be changing "Ryu vs Ken in US" to "Ryu vs Sagat in Thailand". The characters and background change, but the scene is the same.

I tried to put a useState that used the payload but that didn't trigger the repaint either. Also

I am sure I can make it work with an additional transient state, but I am also unable to force a re-render when that state has always clauses. The machine doesn't transition to the state after the transient. See #3245

The third option is adding a non-transient state with a scene that says "Click to start the next fight", but I'd rather not modify the game design to accommodate this hahaha

[pakoito]

Lemme try the action

[pakoito]

It seems to work with the Action

[davidkpiano]

Good to know. In general, keep in mind that useMachine won't cause a rerender unless it's aware that something has changed. If something is happening externally, that needs to either be indicated inside the machine (e.g. with an action) or that external thing itself needs to trigger a rerender.

[pakoito]

There was also a misconception of mine that going through the same pattern match and passing a new prop would cause a component to re-render. It wasn't the case, it needed useEffect(() => setState(propState)) to trigger that re-render.

[pakoito]

Context

Machine:
https://github.com/pakoito/buildmancer/blob/4a31a68a43c07ca77620f21de656e2a50d7d33eb/src/menuStateMachine.ts#L72-L80

Pattern match:
https://github.com/pakoito/buildmancer/blob/4a31a68a43c07ca77620f21de656e2a50d7d33eb/src/App.tsx#L74-L84

useState for the prop:
https://github.com/pakoito/buildmancer/blob/4a31a68a43c07ca77620f21de656e2a50d7d33eb/src/App.tsx#L131-L133

[psahni]

@pakoito - what change you did?
Its not re rendering for me
why things are unnecessary complicated
@davidkpiano

[psahni]

useMachine automatically subscribes to the current state of the machine, which means every state update will result in a re-render of the component that calls it. This re-rendering isn’t always desirable.

https://stately.ai/docs/quick-start#create-an-actor-and-send-events

[psahni]

Its not re rndering for me

[Andarist]

You need to provide a repro case of your problem so we can look at it.

[psahni]

@Andarist
I am just making a simple todo app

This is my machine
https://github.com/codeandtheory/todo_mvc/blob/main/app/store/xstate/TodoMachine.ts

These are my components
https://github.com/codeandtheory/todo_mvc/tree/main/app/components/xstate

Parent component (page in next.js)
https://github.com/codeandtheory/todo_mvc/blob/main/app/xstate/page.tsx

adding a todo, does not re render todos component

[psahni]

@Andarist
So i have a todos and todos form as separate component, I noticed that, todoform is re rendering but todos is not, which is a sibling component
please reply early

[psahni]

Update:
It does not consume and subscribe to state like the way Zustand does, I had to create context
createActorContext(todoMachine);

and then use TodoMachineContext.useActorRef(); everywhere, then it works

Wondering, why it did not work with useMachine