I am not getting any state from onTransition

[theprantadutta]

So here's my machine.

import { assign, createMachine, interpret } from "xstate";

export interface toggleAuth {
  isAuthenticated: boolean;
  user: {
    name: string | undefined;
  };
}

// console.log(getCachedData());

export const authMachine = createMachine<toggleAuth>({
  id: "auth",
  initial: "unauthenticated",
  context: {
    isAuthenticated: false,
    user: {
      name: undefined,
    },
  },
  states: {
    authenticated: {
      on: {
        toggle: {
          target: "unauthenticated",
          actions: assign((context, event) => {
            return {
              ...context,
              isAuthenticated: true,
              user: { name: "Pranta" },
            };
          }),
        },
      },
    },
    unauthenticated: {
      on: {
        toggle: {
          target: "authenticated",
          actions: assign((context, event) => {
            return {
              ...context,
              isAuthenticated: false,
              user: { name: undefined },
            };
          }),
        },
      },
    },
  },
});

export const authServices = interpret(authMachine).onTransition((state) => {
  console.log("State: ", state.value);
});

authServices.start();

Now I am able to toggle the states and context and everything. But the authService is not console-logging the state value like it should every time the state changes. It only runs once.
I am console-logging these state values in another component like Navbar and it works fine there. But I need to detect the state change to persist the state. So how do I do that inside this service? To be precise, how do I make my service run everytime there is a change in states.
I am using nextjs. So is it a problem with react or am I doing something wrong? Thanks in advance

[davidkpiano]

It only runs once.

Are you sending events to the auth service? It won't change state unless you do, according to the machine definition.

[theprantadutta]

Ok, thanks anyway

[theprantadutta]

basically I just want to know if there's any way to do something every time the state changes without using useEffect hook?

But useEffect is the way to do this. If you're asking if there is a convenient built-in XState API for exactly this use-case, there is not.

Just One more question, when should I use an interpreter then?

[Andarist]

I'm not sure if I got the intention right because I'm skimming really quickly through this - but if you want to "listen" to the existing service you can use useActor hook. Note that this will still provide you a state so might not cover some use cases that would like to utilize some other listeners~

[Andarist]

Just One more question, when should I use an interpreter then?

If you want to create a live service from a machine's blueprint outside of React (which does exactly this within useMachine, it's just abstracted from you).

[theprantadutta]

Thanks, @davidkpiano & @Andarist Thanks for helping me out guys. The way I solved this is I used a service inside my authMachine.ts file. Then I am accessing that in any of my react components. Now I am using this same service for all of my react components. And every time my state is changed, I am getting a console log. This is exactly what I wanted.