Finite State Machines & Actors

Eliminate impossible states by constraining your UI to a finite set of statuses using XState v5.

State Management7 min readConcept 17 of 22

Finite State Machines (FSM)

A Finite State Machine (FSM) is a mathematical model of computation. It describes a system that can be in exactly one of a finite number of 'states' at any given time.

An FSM is defined by its States (modes of existence like idle or loading), Events (signals or triggers like FETCH), and Transitions (the directed movement from one state to another caused by an event).

Solving the Boolean Explosion

FSMs completely eliminate the Boolean Explosion. By explicitly defining mutually exclusive states (e.g., 'idle' | 'loading' | 'success' | 'error'), impossible combinations literally cannot exist in memory.

Furthermore, transitions are deterministic. If an event is dispatched but the machine is in a state that doesn't handle that event, the event is safely ignored, preventing illegal mutations.

The Actor Model (XState v5)

In XState v5, everything is an actor. An actor is an independent, live process that encapsulates its own state and communicates purely by receiving asynchronous messages (events) in its mailbox.

When building FSMs in XState, you first define the logic blueprint using createMachine. Then, you instantiate a live, running instance of that logic using createActor(machine).start().

Infographic: The Fetch Statechart

Review the statechart diagram below. Notice how the deterministic transitions (arrows) constrain the flow, making bugs like double-submits mathematically impossible.

import { createMachine, createActor } from 'xstate'; // 1. Define the logic blueprint (Stateless) const fetchMachine = createMachine({ id: 'fetch', initial: 'idle', states: { idle: { on: { FETCH: 'loading' } }, loading: { on: { RESOLVE: 'success', REJECT: 'error' } }, success: { on: { FETCH: 'loading' } }, error: { on: { RETRY: 'loading' } }, } }); // 2. Create the live Actor instance (Stateful) const fetchActor = createActor(fetchMachine); // 3. Start the process and send events fetchActor.start(); fetchActor.send({ type: 'FETCH' });
idle
FETCH
loading
RESOLVE
REJECT
success
error

A Finite State Machine completely eliminates impossible states by guaranteeing the system only exists in one valid state at a time.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In XState v5, what is the fundamental difference between `createMachine` and `createActor`?

Remember this

  • A Finite State Machine can only be in exactly one state at a time, eliminating impossible states.
  • Transitions are deterministic: events are safely ignored if the current state doesn't handle them.
  • XState v5 uses the Actor model for everything.
  • createMachine creates the logic blueprint; createActor creates the live, running instance.

Done with this concept?

Mark it complete to track your progress. No login needed.