Fundamentos de useEffect: dependencias y limpieza
Ejecute efectos secundarios después del renderizado, controle cuándo se repiten con el array de dependencias y devuelva una función de limpieza para evitar fugas de memoria.
Fundamentos de useEffect: dependencias y limpieza es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es useEffect?
useEffect ejecuta un efecto secundario después de que React renderiza. Entre los efectos secundarios se incluyen obtener datos, suscribirse a eventos, configurar temporizadores e interactuar con API externas. Los efectos se ejecutan después del pintado, no durante el renderizado.
Sintaxis básica
useEffect(effect, deps?). La función del efecto se ejecuta después de cada renderizado de forma predeterminada. Proporcione un array de dependencias para controlar cuándo se ejecuta.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}El array de dependencias controla cuándo se ejecuta el efecto
Array vacío []: se ejecuta una vez después del montaje. Array no vacío [a, b]: se ejecuta cuando cambia a o b. Sin array: se ejecuta después de cada renderizado, algo que rara vez necesitará.
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});La función de limpieza
Devuelva una función desde useEffect para realizar la limpieza: elimine los escuchadores de eventos, cancele las suscripciones y borre los temporizadores. La limpieza se ejecuta antes del siguiente efecto y al desmontar el componente.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Cierres obsoletos en las dependencias
Los efectos capturan los valores a los que hacen referencia en el momento en que se crean. Si lee un valor de estado o una prop dentro de un efecto sin incluirlo en las dependencias, verá un valor obsoleto. La regla exhaustive-deps de ESLint detecta este problema.
Regla exhaustive-deps de ESLint
La regla de ESLint react-hooks/exhaustive-deps muestra una advertencia cuando faltan dependencias del efecto. Casi siempre es correcto seguir sus sugerencias: las dependencias obsoletas provocan errores.
useEffect frente a useLayoutEffect
useEffect se ejecuta después de que el navegador pinta. useLayoutEffect se ejecuta de forma síncrona después de las mutaciones del DOM y antes del pintado. Utilice useLayoutEffect para leer las dimensiones del DOM y evitar parpadeos visuales.
Varios efectos
Use varias llamadas a useEffect para separar responsabilidades no relacionadas. Cada efecto puede tener su propio array de dependencias y su propia lógica de limpieza.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Condiciones de carrera: la bandera de ignorar
Cuando un efecto obtiene datos basándose en props, las solicitudes anteriores pueden resolverse después que las posteriores. Use una bandera de limpieza para ignorar las respuestas obsoletas.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Doble ejecución de efectos en Strict Mode
Strict Mode de React 18 monta, desmonta y vuelve a montar los componentes durante el desarrollo para detectar errores de limpieza. Sus efectos se ejecutarán dos veces; es intencionado y ayuda a detectar la falta de limpieza.
Cuándo no usar useEffect
No use useEffect para: 1) derivar el estado de las props, calcúlelo durante el renderizado; 2) restablecer el estado cuando cambien las props, use la prop key; 3) actualizar el estado incondicionalmente, ya que esto provoca bucles. Si tiene dudas, pregúntese: ¿este código responde a un evento del usuario o a un sistema externo?
Comprobación rápida
¿Cuándo se ejecuta la función de limpieza de useEffect?
Resumen: useEffect
Los efectos secundarios se ejecutan después del renderizado. Un array de dependencias vacío = una vez al montar. Un array de dependencias = cuando cambian valores concretos. Devuelva una función de limpieza para evitar fugas. Use varios efectos para separar responsabilidades. La bandera de ignorar evita las respuestas obsoletas de las solicitudes. Strict Mode ejecuta los efectos dos veces para comprobar la limpieza. No use useEffect para valores derivados ni para estados que pueda calcular durante el renderizado.
Preguntas frecuentes
¿La lección «Fundamentos de useEffect: dependencias y limpieza» es gratis?
Sí — el texto completo de «Fundamentos de useEffect: dependencias y limpieza» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Fundamentos de useEffect: dependencias y limpieza»?
Ejecute efectos secundarios después del renderizado, controle cuándo se repiten con el array de dependencias y devuelva una función de limpieza para evitar fugas de memoria. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Fundamentos de useEffect: dependencias y limpieza»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de useEffect: dependencias y limpieza
- Obtener datos al montar el componente
- Gestionar estados de carga y error
- AbortController para la limpieza