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

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.