¿Qué son las máquinas de estado y cuándo son útiles?

Question

Accepted Answer

Una **máquina de estado** modela un sistema como un conjunto finito de **estados** más las **transiciones** permitidas entre ellos. En lugar de hacer malabarismos con banderas booleanas independientes, define exactamente qué estados existen y qué transiciones son legales — haciendo que los estados imposibles sean irrepresentables.

## El problema: 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
```

Con banderas independientes, nada detiene combinaciones contradictorias y debe mantenerlas consistentes manualmente en cada transición — una fuente de errores.

## El modelo de máquina de estado

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

Una única variable `state` contiene el estado actual; un `event` desencadena una transición *definida*. Las transiciones ilegales (p. ej., SUCCESS mientras está inactivo) simplemente no pueden ocurrir — los estados imposibles desaparecen por diseño.

## Herramientas del mundo real: 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" } },
  },
});
```

## Cuándo las máquinas de estado ayudan

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

## Por qué es importante

Las máquinas de estado aportan rigor a la lógica de estado compleja haciendo que **los estados inválidos sean imposibles** y las transiciones **explícitas** — reemplazando frágiles combinaciones de booleanos con un modelo claro y exhaustivo.

Son especialmente valiosas para flujos intrincados (asistentes, pagos, autenticación, multimedia) donde el boolean soup conduce a errores sutiles y difíciles de reproducir.

Incluso informalmente (`status` enum) la idea mejora el estado asincrónico; formalmente (XState) proporciona lógica visualizable, comprobable y robusta.

Saber cuándo recurrir a ellas es una marca del diseño de estado maduro.