Problem to check the current machine state using XState in React

Question

im trying to check the Machine state from inside a function in a react component (state.value), but its never change the current state, it always prints the initial state, but if i put a onClick event in the component and call console.log(state.value), it works... Im doing something wrong?

const [state, send] = useMachine(knightMachine);

const loop = ()  => {
    console.log(state.value);
    
     setTimeout(loop, 10);
    
    }
    
    /// Always print the initial state.


    <div
    onClick={() => {
    console.log(state.value);
    }}
    ></div>
    
    /// It Prints the right value

Could you share your whole component as well as your state machine with me? — Nick Vu, Mar 06 '22 at 03:06

score 3 · Accepted Answer · answered Mar 06 '22 at 03:14

This is likely due to a stale closure. You are always reading the closed-in value of state in the loop.

Instead, you can read from service.getSnapshot():

const [state, send, service] = useMachine(knightMachine);

// ...

console.log(service.getSnapshot().value); // up-to-date value

// ...

Problem to check the current machine state using XState in React

1 Answers1