Limpieza en useEffect

Funcion de limpieza (cleanup)

Algunos efectos necesitan limpieza para evitar memory leaks. Retorna una funcion de useEffect para limpiar.

Ejemplo: Timer

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup: se ejecuta al desmontar
    // o antes del proximo efecto
    return () => {
      clearInterval(interval);
    };
  }, []);

  return <p>Segundos: {seconds}</p>;
}

Ejemplo: Event listener

function WindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>{size.width} x {size.height}</p>;
}

Ejemplo: Suscripcion

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId]);

  return <div>Chat Room: {roomId}</div>;
}

Cuando necesitas cleanup?

• Timers (setInterval, setTimeout)
• Event listeners
• Suscripciones (WebSocket, observers)
• Conexiones externas

Orden de ejecucion

useEffect(() => {
  console.log('1. Efecto ejecutado');

  return () => {
    console.log('2. Cleanup ejecutado');
  };
}, [dep]);

// Cuando 'dep' cambia:
// 1. Cleanup del efecto anterior
// 2. Nuevo efecto ejecutado