How to deal with data local to a state?

[rajansaini691]

Hello! This is probably a simple question, but I am stumped. While my application is in a certain state, it needs to count the number of times a certain event XYZ occurs (message from server). However, that number does not matter anywhere else in the application. If I'm trying to avoid polluting the top-level context, where should the data live?

It would be nice if there were some state-level context that is destroyed once the machine leaves the state; unfortunately, I have not figured out how to get this past the typescript compiler.

Alternatively, I was thinking of holding the number in the react component that renders it. I could then expose a member function "incrementCount()" that gets called as an action whenever the event occurs. However, the docs say that the state machine should not know about any components, so I am not sure how to register said callback.

I'm definitely missing something, but not sure what. Any help is appreciated. Thanks!

[davidkpiano]

By definition, the state (including finite + extended data/context) is for the entire machine, so we can't bend the rules and have "state-specific" data. However...

It would be nice if there were some state-level context that is destroyed once the machine leaves the state

That's what invoke is for! You can invoke a machine (or other entities like observables/promises) that are only active while they are in that state. You can get that invoked actor via state.children.[invoke id] and .subscribe(...) to it to listen to its state.

Alternatively, I was thinking of holding the number in the react component that renders it. I could then expose a member function "incrementCount()" that gets called as an action whenever the event occurs. However, the docs say that the state machine should not know about any components, so I am not sure how to register said callback.

All communication is done by events. So, convert your component-level state changes to events:

const [state, send] = useMachine(...);
const [someState, setSomeState] = useState(...);

useEffect(() => {
  send({ type: 'someState.update', value: someState });
}, [someState]);