State change not triggering a re-render in React?

[amerfarooq]

I've started using the xstate library recently and I am failing to understand why a state change in my machine is not triggering a re-render when using the useMachine hook. I'm very new to this so I apologize if this is very basic but I couldn't understand how to go about doing it. This is my current code (using NextJs 14):

page.tsx:

import { Renderer } from './renderer';

export default async function Page() {
  return <Renderer />;
}

renderer.tsx:

'use client';

import { useMachine } from '@xstate/react';
import { CurrentAddressStep } from './current-address-step';
import { CurrentResidenceStep } from './current-residence-step';
import { addressMachine } from './state-machine';

export const Renderer = () => {
  const [state] = useMachine(addressMachine);

  if (state.matches('currentAddress')) {
    return <CurrentAddressStep />;
  } else if (state.matches('currentResidence')) {
    return <CurrentResidenceStep />;
  } else {
    return <h1>No Match!</h1>;
  }
};

state-machine.tsx:

import { AddressSchema } from '@/components/address-form';
import { ResidenceSchema } from '@/components/residence-form';
import { assign, log, setup } from 'xstate';

export const addressMachine = setup({
  types: {
    context: {} as {
      currentAddress?: AddressSchema;
      currentResidence?: ResidenceSchema;
    },
    events: {} as
      | { type: 'goToCurrentAddress' }
      | { type: 'goToCurrentResidence'; currentAddress: AddressSchema },
  },
  actions: {
    persistCurrentAddress: async (_, params: AddressSchema) => {},
    persistCurrentResidence: () => {},
  },
}).createMachine({
  context: {},
  initial: 'currentAddress',
  states: {
    currentAddress: {
      on: {
        goToCurrentResidence: {
          actions: assign(({ context, event }) => {
            console.log('Updating context');
            return {
              ...context,
              currentAddress: event.currentAddress,
            };
          }),
          target: 'currentResidence',
        },
      },
      entry: log('On currentAddress'),
      exit: log('Leaving currentAddress'),
    },
    currentResidence: {
      entry: log('On currentResidence'),
    },
  },
});

current-address-step.tsx:

export const CurrentAddressStep = () => {
  const [state, send] = useMachine(addressMachine);

  async function onSubmit(data: AddressSchema) {
    send({ type: 'goToCurrentResidence', currentAddress: data });
  }

  // Some React Hook Form
  return <AddressForm onSubmit={onSubmit} />;
};

The problem I'm facing is that when I submit my form, I can see the logs which show me that the state has changed to onCurrentResidence but my Renderer component does not pick up this state change and hence does not render the next step component. How do I listen for this change?

[Andarist]

Please prepare this in a runnable form - using Stackblitz or CodeSandbox (or at least a cloneable repository) and please list the exact steps to reproduce the issue using the provided repro.

[Andarist]

It might be that you are creating two separate instances of the same machine - if u want to observe a state change in multiple places you have to make sure that you are using the same instance

[ersinakinci]

@amerfarooq did you ever figure out the solution? I'm having the same problem.

[ersinakinci]

Figured out my issue. I was invoking the useMachine hook in multiple components, assuming that just because I was passing in a singleton machine from another file that it would all refer to the same machine.

My mental model was incorrect: useMachine instantiates an actor, and it's the actor that holds state, not the machine. Machines are merely the blueprints for actors. So I was creating multiple actors, and when I updated one, naturally it didn't trigger re-renders on my component that was subscribed to state changes in the other.

For anyone who wants to verify similar behavior in their code, you can print the actor id inside of an entry action:

createMachine({
  id: "mainFlow",
  initial: "selectingScenario",
  states: {
    selectingScenario: {
      entry: [
        (context) =>
          console.log(
            "entry into selectingScenario, actor id is",
            context.self.id
          ),
      ],
    }
  }
})

If you see different actor ids, that means you're instantiating multiple actors.

[ersinakinci]

For the sake of completeness:

can you just confirm if this approach is even correct i.e. will dispatching an event trigger a re-render?

If you're reading state from the same actor across your components, and if your event causes a state transition or context mutation, then yes, the useMachine hook should trigger a re-render in React.

I'm passing state via React context to child components, but there are many approaches, such as just using props.

[with-heart]

My mental model was incorrect: useMachine instantiates an actor, and it's the actor that holds state, not the machine. Machines are merely the blueprints for actors. So I was creating multiple actors, and when I updated one, naturally it didn't trigger re-renders on my component that was subscribed to state changes in the other.

@ersinakinci this is a solid explanation!