Wat zijn state machines en wanneer helpen ze?

Question

Accepted Answer

Een **state machine** modelleert een systeem als een eindige set van **states** plus de toegestane **transitions** daartussen. In plaats van onafhankelijke boolean flags te beheren, definieer je precies welke states bestaan en welke transitions legaal zijn — waardoor onmogelijke states niet kunnen voorkomen.

## Het probleem: boolean soup

```js
// ❌ multiple booleans → 2^n combinations, many of them invalid
const [isLoading, setLoading] = useState(false);
const [isError, setError] = useState(false);
const [isSuccess, setSuccess] = useState(false);
// { isLoading: true, isError: true, isSuccess: true } — nonsense, but POSSIBLE
```

Met onafhankelijke flags is niets tegen tegenstrijdige combinaties beschermd, en je moet ze handmatig consistent houden bij elke transition — een bugfabriek.

## Het state-machine model

```text
States:      idle → loading → success
                       ↓
                     error → (retry) → loading

Only defined transitions are allowed; you can't be in two states at once.
```

```js
const machine = {
  idle:    { FETCH: "loading" },
  loading: { SUCCESS: "success", ERROR: "error" },
  success: { FETCH: "loading" },
  error:   { RETRY: "loading" },
};
function transition(current, event) {
  return machine[current][event] ?? current; // only legal transitions happen
}
```

Een enkele `state` variabele bevat de huidige state; een `event` triggert een *gedefinieerde* transition. Illegale transitions (bv. SUCCESS terwijl idle) kunnen gewoon niet voorkomen — de onmogelijke states zijn bij ontwerp verdwenen.

## Real-world tooling: XState

```js
// libraries like XState formalize this with guards, actions, nested/parallel states
const toggleMachine = createMachine({
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active:   { on: { TOGGLE: "inactive" } },
  },
});
```

## Wanneer state machines helpen

```text
✓ Complex flows with many states: checkout, multi-step forms/wizards, media players
✓ Authentication flows (logged out → logging in → logged in → refreshing)
✓ Anything where invalid state combinations cause bugs
✗ Overkill for simple toggles or trivial state
```

## Waarom het belangrijk is

State machines brengen nauwkeurigheid naar complexe stateful logica door **ongeldige states onmogelijk** te maken en transitions **expliciet** — boolean soup wordt vervangen door een helder, uitputtend model.

Ze zijn vooral waardevol voor ingewikkelde flows (wizards, payments, auth, media) waar boolean soup tot subtiele, moeilijk reproduceerbare bugs leidt.

Zelfs informeel (een `status` enum) verbetert het idee async state; formeel (XState) biedt het visualiseerbare, testbare, robuuste logica.

Weten wanneer je ze moet inzetten is een kenmerk van rijpe state design.