XState

Overview

XState is a state management library based on finite state machines and statecharts — a mathematically grounded approach to modeling application logic. Instead of managing state as a bag of variables, you model your system as a set of explicit states with defined transitions between them, making impossible states impossible.

XState v5 introduced the actor model, where each state machine is an actor that can spawn child actors, communicate via events, and manage its own state. The Stately Studio visual editor lets you design, visualize, and simulate state machines before writing code, bridging the gap between design and implementation.

When to Use

XState is the right choice for complex UI workflows (multi-step forms, onboarding flows), application logic with many states and transitions, or any system where you need to guarantee that illegal states are unreachable. It’s overkill for simple counter state but invaluable for complex business logic.

Getting Started

npm install xstate @xstate/react

import { createMachine } from "xstate";
import { useMachine } from "@xstate/react";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

function Toggle() {
  const [state, send] = useMachine(toggleMachine);
  return (
    <button onClick={() => send({ type: "TOGGLE" })}>
      {state.value === "active" ? "ON" : "OFF"}
    </button>
  );
}