Las fugas de memoria por escuchadores de eventos ocurren cuando se agregan escuchadores repetidamente sin ser eliminados, haciendo que el conteo crezca indefinidamente. Cada escuchador mantiene una referencia a su clausura, impidiendo la recolección de basura de los objetos que captura. Esto conduce a un mayor uso de memoria y posible sobrecarga de CPU.
Por qué ocurre
- •Agregar un escuchador dentro de una función que se llama múltiples veces sin eliminar el anterior.
- •En React, agregar un escuchador global en useEffect sin devolver una función de limpieza.
- •Las funciones flecha anónimas usadas como escuchadores no pueden eliminarse con removeEventListener.
- •Las aplicaciones de página única que re-ejecutan el código de configuración en cada navegación sin limpieza.
Ejemplos
Código que causa el error
// Called on every route change
function setup() {
window.addEventListener("resize", () => {
console.log("resized");
});
}Error en la terminal
// No immediate error, but memory and CPU usage grow over time. // Chrome DevTools > Memory > Heap snapshot shows growing listener count.
Cómo solucionarlo
Siempre almacena las referencias de escuchadores y elimínalas cuando ya no sean necesarias. En React, devuelve una función de limpieza desde useEffect. Usa AbortController para eliminar múltiples escuchadores a la vez. Usa { once: true } para escuchadores que deben dispararse solo una vez.
Código corregido
function handleResize() {
console.log("resized");
}
function setup() {
window.addEventListener("resize", handleResize);
}
function teardown() {
window.removeEventListener("resize", handleResize);
}Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis