A Complete Introduction to State Machines in JavaScript

Author: Jon Bellah | Published: 2018-10-09 | Generated: 2025-03-08 | Domain: jonbellah.com
Tags: ‘#javascript’ ‘#state-machines’ ‘#statecharts’ ‘#react’ ‘#xstate’

---

TLDR

State machines design state rather than merely storing it: a component occupies one finite, explicit state and accepts only defined transitions. The article advocates an event-state-action model—transition first, then execute state-associated actions—to prevent ambiguous behavior such as duplicate payment submissions. Using XState with React, it builds a payment form with idle, loading, error, and final success states, async effects, and guarded validation transitions.

Explicit state diagrams also become a shared artifact for engineering, design, product flows, analytics, and automated path-based testing.

Key Takeaways

• Explicit behavior over boolean flags: Replace scattered implicit flags such as isLoading and isFetching with a finite set of named states and clearly permitted transitions.
• Event-state-action paradigm: Rather than dispatching actions directly from events, an event transitions state and actions run in response to the resulting state. A form in loading, for example, ignores additional SUBMIT events and prevents duplicate payment requests.
• Payment-form model: The example begins in idle; SUBMIT moves to loading; payment completion transitions to success; failures transition to error; and success is marked as a final state.
• XState is stateless in the shown version: The app supplies its current React machine state to stateMachine.transition(), executes returned actions through runActions, then saves the next machine state in component state.
• Guards enforce validation: A cond predicate checks that name and card fields are nonempty before allowing a SUBMIT transition to loading; invalid submissions instead reach or remain in error.
• Visualize and test flows: State-machine diagrams can align stakeholders, while shortest-path analysis can enumerate paths for automatically generated transition and state tests.

Images & Media

• Payment form state diagram — Diagram of idle, loading, success, and error states and the events connecting them.

Referenced Links

• Promise state-machine implementation — Example of a finite state machine with pending, rejected, and fulfilled states.
• Statecharts paper by David Harel — Foundational 1987 paper introducing statecharts.
• SCXML specification — W3C State Chart XML standard.
• XState — Framework-agnostic JavaScript library used to define and transition the machine.
• XState visualizer (xviz) — Tool for generating and inspecting a state diagram from machine code.
• Payment-form CodePen demo — Demo containing the component markup, styles, and fakePayment() implementation.