XState State Machines

Model complex UI and app logic as statecharts with XState. Builds finite state machines, hierarchical and parallel states, guarded transitions, actors, and side-effect handling for flows too tricky for booleans.

This skill helps you tame stateful logic with XState v5. It designs finite and hierarchical state machines, models parallel regions, adds guards and delayed transitions, spawns and invokes actors, handles side effects with actions and services, and wires machines into React via @xstate/react — turning tangled boolean flags into visual, testable statecharts.

When to use

Use when UI logic outgrows useState — multi-step wizards, checkout and auth flows, retries and timeouts, drag interactions, or any process with clear states and transitions you want to model explicitly.

Examples

Multi-step checkout machine

Model a wizard as a statechart

Design an XState machine for a 3-step checkout with cart, shipping, and payment states, guarded transitions, and an invoked payment service

Fetch with retry

State machine for async loading

Build an XState machine with idle, loading, success, and failure states plus automatic retry with exponential backoff on failure