State Machines with XState v5

When to Use State Machines

Use state machines for complex state that has:

• Multiple distinct states (idle, loading, error, success).
• Guarded transitions (can only submit if form is valid).
• Sequences (multi-step wizards, onboarding flows).
• Parallel concerns (loading data + playing animation simultaneously).

Don't use for simple toggles or value-tracking — useState is fine for those.

Setup

npm install xstate @xstate/react