Lidiar con lógica de estados en componentes React puede convertirse rápidamente en un caos incontrolable.

El truco

// ANTES: Lógica de estado compleja con useState
function TrafficLight() {
  const [light, setLight] = useState('red');
  
  useEffect(() => {
    const interval = setInterval(() => {
      setLight(prevLight => {
        switch (prevLight) {
          case 'red': return 'green';
          case 'green': return 'yellow';
          case 'yellow': return 'red';
          default: return 'red';
        }
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div className={`light ${light}`} />;
}

// DESPUÉS: Implementando XState para gestión de estados
import { useMachine } from '@xstate/react';
import { createMachine } from 'xstate';

const lightMachine = createMachine({
  id: 'trafficLight',
  initial: 'red',
  states: {
    red: { on: { NEXT: 'green' } },
    green: { on: { NEXT: 'yellow' } },
    yellow: { on: { NEXT: 'red' } }
  }
});

function TrafficLight() {
  const [state, send] = useMachine(lightMachine);

  useEffect(() => {
    const interval = setInterval(() => send('NEXT'), 1000);
    return () => clearInterval(interval);
  }, [send]);

  return <div className={`light ${state.value}`} />;
}

XState permite definir una máquina de estados clara y estructurada, desplazando el estado complejo hacia una configuración declarativa. Con XState, tus estados y transiciones están especificados claramente, lo que facilita la comprensión y el mantenimiento del código.

La gestión de estados en React no tiene por qué ser complicada; simplifica con XState y mantén tu cabeza libre de caos.