useEffect: efectos secundarios

No todo es renderizar

Hasta ahora, tus componentes hacen una cosa: reciben datos y devuelven JSX. Pero las aplicaciones reales necesitan hacer cosas que van más allá del render:

• Iniciar un timer que cuente segundos
• Hacer un fetch a una API
• Escuchar eventos del navegador (scroll, resize)
• Actualizar el título de la pestaña
• Conectarse a un websocket

Todo esto son efectos secundarios — operaciones que no son "calcular qué se ve en pantalla". Y React tiene un hook específico para ellos: useEffect.

La sintaxis básica

useEffect recibe dos argumentos:

1. Una función con el código del efecto
2. Un array de dependencias que controla cuándo se ejecuta

Las 3 variantes del array de dependencias

Sin array: se ejecuta en CADA render

Raramente útil. Puede causar bucles infinitos si el efecto actualiza estado.

Array vacío []: solo al montar

Perfecto para: fetch inicial, suscripciones, timers, setup.

Con dependencias [valor]: cuando cambian

Se ejecuta al montar Y cada vez que count cambie. No se ejecuta si otras cosas cambian.

Función de limpieza (cleanup)

Algunos efectos necesitan "limpiarse" cuando el componente se desmonta o antes de ejecutar el efecto de nuevo. Por ejemplo, si creas un setInterval, necesitas un clearInterval para que no se acumule:

La función que retornas desde useEffect es la función de limpieza. React la llama:

• Cuando el componente se desmonta
• Antes de ejecutar el efecto de nuevo (si las dependencias cambiaron)

Ejemplo: reloj digital

Desglosado:

1. useState(new Date()) — el estado guarda la hora actual
2. useEffect con [] — solo se ejecuta al montar
3. setInterval — actualiza la hora cada segundo
4. return () => clearInterval(id) — limpia el intervalo al desmontar

Sin la limpieza, cada vez que el componente se monte crearía un nuevo intervalo sin destruir el anterior. Con el tiempo, tendrías cientos de intervalos corriendo.

Ejemplo: título de la pestaña

Cada vez que count cambia, el título de la pestaña se actualiza.

Tu desafío 🚀

Crea un reloj digital que:

1. Declare un estado para la hora actual con useState
2. Use useEffect con un setInterval que actualice la hora cada segundo
3. Devuelva una función de limpieza con clearInterval
4. Muestre la hora en pantalla

useEffect es tu herramienta para conectar React con el mundo exterior. Con useState controlas QUÉ se ve. Con useEffect controlas QUÉ PASA.