Qu'est-ce que les machines d'état et quand aident-elles ?

Question

Accepted Answer

Une **machine d'état** modélise un système comme un ensemble fini d'**états** plus les **transitions** autorisées entre eux. Au lieu de jongler avec des booléens indépendants, vous définissez exactement quels états existent et quelles transitions sont légales — rendant les états impossibles non-représentables.

## The problem: 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
```

Avec des flags indépendants, rien n'empêche les combinaisons contradictoires, et vous devez les garder manuellement cohérentes à chaque transition — un piège à bugs.

## The 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
}
```

Une seule variable `state` contient l'état actuel ; un `event` déclenche une transition *définie*. Les transitions illégales (par ex. SUCCESS au repos) ne peuvent simplement pas se produire — les états impossibles ont disparu par conception.

## 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" } },
  },
});
```

## When state machines help

```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
```

## Pourquoi c'est important

Les machines d'état apportent de la rigueur à la logique stateful complexe en rendant les **états invalides impossibles** et les transitions **explicites** — en remplaçant les combinaisons fragiles de booléens par un modèle clair et exhaustif.

Elles sont particulièrement précieuses pour les flux complexes (assistants, paiements, authentification, médias) où le chaos booléen mène à des bugs subtils et difficiles à reproduire.

Même informellement (une enum `status`) l'idée améliore l'état asynchrone ; formellement (XState) elle fournit une logique visualisable, testable et robuste.

Savoir quand les utiliser est la marque d'une conception d'état mûre.