Intermedioreact
useEffect: Efectos Secundarios
Aprende a ejecutar logica fuera del flujo de renderizado: llamadas a APIs, suscripciones y timers.
Que son los efectos secundarios
Un efecto secundario es cualquier operacion que no se limita a calcular el output del componente: peticiones HTTP, manipulacion del DOM, timers, suscripciones, etc. El hook
useEffect permite ejecutar esta logica de forma controlada.Sintaxis de useEffect
El primer argumento es la funcion a ejecutar. El segundo es un array de dependencias que controla cuando se re-ejecuta el efecto.
jsx
1import { useState, useEffect } from "react";
2
3function ListaProductos() {
4 const [productos, setProductos] = useState([]);
5 const [loading, setLoading] = useState(true);
6
7 useEffect(() => {
8 async function cargar() {
9 const res = await fetch("/api/productos");
10 const data = await res.json();
11 setProductos(data);
12 setLoading(false);
13 }
14 cargar();
15 }, []); // [] = solo se ejecuta al montar
16
17 if (loading) return <p>Cargando...</p>;
18 return <ul>{productos.map(p => <li key={p.id}>{p.nombre}</li>)}</ul>;
19}Limpieza de efectos
La funcion retornada por useEffect se ejecuta al desmontar el componente o antes de re-ejecutar el efecto. Es clave para limpiar suscripciones y timers.
jsx
1function Reloj() {
2 const [hora, setHora] = useState(new Date());
3
4 useEffect(() => {
5 const intervalo = setInterval(() => {
6 setHora(new Date());
7 }, 1000);
8
9 // Funcion de limpieza
10 return () => clearInterval(intervalo);
11 }, []);
12
13 return <p>{hora.toLocaleTimeString()}</p>;
14}