Las máquinas de estado son un patrón de diseño que modela el comportamiento de un componente como un conjunto finito de estados posibles y las transiciones entre ellos.

Concepto básico

Imagina un semáforo: solo puede estar en “rojo”, “amarillo” o “verde”, y sigue reglas específicas para cambiar de un color a otro. Esto es una máquina de estado finita.

En React, este concepto te ayuda a gestionar lógica compleja de UI de forma predecible y mantenible.

¿Por qué usarlas?

Cuando tu componente tiene múltiples estados interdependientes (cargando, error, éxito, etc.), manejarlos con simples useState puede volverse caótico:

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);

Este enfoque permite estados imposibles como “cargando con error” o “éxito sin datos”.

Ejemplo simple con useReducer

Puedes implementar una máquina de estado básica con useReducer:

const initialState = { status: 'idle', data: null, error: null };

function reducer(state, action) {
  switch (action.type) {
    case 'FETCH':
      return { status: 'loading', data: null, error: null };
    case 'SUCCESS':
      return { status: 'success', data: action.payload, error: null };
    case 'ERROR':
      return { status: 'error', data: null, error: action.payload };
    default:
      return state;
  }
}

XState – La biblioteca más popular

Para casos complejos, existe XState, una biblioteca que implementa máquinas de estado formales:

import { createMachine } from 'xstate';

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

Ventajas principales

• Predecibilidad: Solo ciertos estados y transiciones son posibles
• Visualización: Puedes diagramar tu lógica claramente
• Debugging: Más fácil entender qué salió mal
• Mantenibilidad: Cambios futuros son más seguros

Las máquinas de estado brillan especialmente en formularios multi-paso, flujos de autenticación, o cualquier UI con comportamiento complejo y bien definido.