Seamos sinceros: probablemente la lógica de estado en tu componente de React empezó siendo simple.

Un par de booleanos. Tal vez un useEffect. Lo justo para que funcione.

Pero luego las cosas se complicaron:

• Agregaste un estado de carga.

• Después, un estado de error.

• Luego, un flujo de reintento.

• Y finalmente, un caso raro donde hay carga y error al mismo tiempo.

Ahora estás manejando isLoading, hasError, isSubmitting, showModal, y una maraña de if/else, y aún así no estás seguro si cubriste todos los casos.

¿Te suena familiar?

A menudo tratamos el estado de UI como una estructura plana de booleanos o enums.

Pero en realidad, tu UI es un proceso. Una secuencia. Un usuario hace clic, algo sucede, y la UI responde.

Eso no es solo estado. Es estado a través del tiempo — y eso es exactamente lo que una máquina de estados modela.

¿Qué pasaría si, en vez de conectar un montón de banderas y condiciones, modelaras la lógica de tu UI como una máquina de estados?

Con una máquina de estados, puedes:

• Definir todos los estados posibles desde el principio

• Describir solo las transiciones válidas

• Eliminar estados imposibles o contradictorios

• Tener un mapa visual de tu lógica — gratis

Veamos un ejemplo simple.

import { createMachine } from 'xstate';

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

Eso es todo.

Una máquina. Dos estados. Un evento. Sin booleanos. Sin condicionales. Sin useState.

Simple, expresivo y con tipado fuerte.

Así es como realmente luce esa máquina:

Herramientas como Stately.ai te permiten ver tus máquinas como diagramas de flujo — para que tú y tu equipo entiendan instantáneamente lo que está pasando.

Esto no es solo para toggles. Puedes usar máquinas de estados para:

• Simplificar formularios multistep y asistentes

• Modelar modales, menús desplegables o flujos de onboarding

• Eliminar estados inconsistentes en la UI

• Reemplazar lógica useEffect con transiciones declarativas

Y cuando combinas XState + React + TypeScript, desbloqueas una arquitectura de UI segura, testeable y escalable.

En el siguiente número, vamos a desglosar los tres bloques fundamentales de cualquier máquina de estados — y cómo identificarlos en tus propios componentes.

Vas a aprender cómo pasar de un estado caótico a un comportamiento modelado en minutos.

Elige una interacción pequeña en tu UI — un toggle, modal o dropdown — e intenta modelarla como una máquina de estados.

Solo una.

Y luego pregúntate: ¿fue más fácil razonar sobre esto?

Responde este correo y cuéntame cómo te fue — o etiquéteme en Twitter/X. Voy a destacar algunos ejemplos interesantes en futuros envíos.