useEffect y sincronización con el exterior

useEffect sirve para sincronizar tu componente con algo externo al render:

• una petición
• un setInterval
• un listener del navegador
• una librería externa

No está para “hacer cosas después de render” sin criterio.

Ejemplo básico

import { useEffect, useState } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

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

  return <p>Ancho: {width}</p>;
}

La función retornada es la limpieza del efecto.

Dependencias

useEffect(() => {
  document.title = `Carrito (${count})`;
}, [count]);

Si count cambia, el efecto vuelve a ejecutarse.

Si usas valores dentro del efecto, normalmente deben estar en la lista de dependencias.

Cuándo NO necesitas useEffect

No lo uses para:

• derivar datos
• filtrar arrays
• ordenar valores
• construir strings

Eso se hace durante el render:

const visibleProducts = products.filter((p) => p.inStock);

No así:

useEffect(() => {
  setVisibleProducts(products.filter((p) => p.inStock));
}, [products]);

Ese patrón suele crear estado duplicado innecesario.

Regla práctica

Pregunta correcta:

“¿Estoy sincronizando el componente con algo externo?”

Si la respuesta es no, probablemente no necesitas useEffect.

En la siguiente lección juntamos varias piezas: inputs, formularios y estado compartido entre componentes.