Aprende a modelar correctamente dependencias y funciones de limpieza para evitar efectos duplicados, fugas de memoria y datos obsoletos.
Cuando un componente interactúa con suscripciones, intervalos o listeners globales, no basta con montar el efecto: también hay que desmontarlo correctamente.
La función de limpieza de useEffect evita fugas y comportamientos duplicados al salir del componente o al cambiar dependencias.
Un error muy habitual es dejar arrays de dependencias incompletos para 'callar warnings', generando estados desincronizados difíciles de depurar.
La regla profesional es clara: declara todas las dependencias reales y simplifica la lógica cuando el effect se vuelve difícil de mantener.
React ejecuta la limpieza antes de volver a ejecutar el effect y también al desmontar el componente.
Si creas un `setInterval`, debes limpiarlo con `clearInterval` para evitar timers activos después de salir de la vista.
Si registras `window.addEventListener`, debes removerlo con `removeEventListener` en cleanup.
Esta simetría montar/desmontar es clave para componentes estables en producción.
El array no es una optimización manual, es una declaración de qué valores usa tu effect.
Si un effect acumula muchas ramas y dependencias, suele indicar falta de separación de responsabilidades.
Un effect pequeño y específico se depura más rápido y minimiza efectos colaterales.
La limpieza explícita es parte del diseño, no un añadido al final.
Aprende a modelar correctamente dependencias y funciones de limpieza para evitar efectos duplicados, fugas de memoria y datos obsoletos.
Código del tema: useEffect(() => { /* sync */ }, []);
React ejecuta la limpieza antes de volver a ejecutar el effect y también al desmontar el componente.
Si creas un `setInterval`, debes limpiarlo con `clearInterval` para evitar timers activos después de salir de la vista.
Si registras `window.addEventListener`, debes removerlo con `removeEventListener` en cleanup.
Esta simetría montar/desmontar es clave para componentes estables en producción.
El array no es una optimización manual, es una declaración de qué valores usa tu effect.
import { useEffect } from 'react';
function ResizeWatcher() {
useEffect(() => {
const onResize = () => console.log(window.innerWidth);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
};
}, []);
return <p>Observando ancho de ventana</p>;
}Si un effect acumula muchas ramas y dependencias, suele indicar falta de separación de responsabilidades.
Un effect pequeño y específico se depura más rápido y minimiza efectos colaterales.
La limpieza explícita es parte del diseño, no un añadido al final.