Hey all ! I recently made my first statechart using xstate, This statechart isn't directly modelled in the UI layer, as it has two distinct UIs to drive simultaneously. I'm now trying to make it easier to understand in the visualizer by regrouping states that share transitions in compound states (clustering, as this page describes it. While statechard.github.io doesn't make the distinction, xstate lets me choose between creating hierarchical state nodes and invoking other machines/actors. Do you have any guidelines about when to prefer one method over the other ? My guts tell me it's a modularisation/boundaries problem. Also having separate machines allows isolation of the context data. But feel free to correct me.

In addition to this, when creating compound states, I find myself adding more states that don't have a representation in the UI; like final child state nodes. How does a normal xstate + react app handle those to make no re-render happens ?

For those passing by, I think I'm finding parts of answers to my questions in this thread about decoupling statecharts and views :

Why does

@xstate

/vue no longer have a context exposed from useMachine?

(in Vue3)

There is now an XState Discord: https://discord.gg/xtWgFTgvNV

And so it begins: