JavaScript

Qué significa Fuga de memoria por escuchadores de eventos y cómo solucionarlo

Referencia del error

Fuga de memoria por escuchadores de eventos

Lenguaje

JavaScript

Severidad

Baja

Cuándo ocurre

Las fugas de memoria por escuchadores de eventos ocurren cuando se agregan escuchadores repetidamente sin ser eliminados, haciendo que el conteo crezca indefinidamente.

Posibles soluciones

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.

Errores relacionados

MaxListenersExceededWarning useEffect con dependencia faltante

Más detalles

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.

Posibles soluciones

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.

Ejemplos

JavaScript

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ódigo corregido

function handleResize() {
  console.log("resized");
}

function setup() {
  window.addEventListener("resize", handleResize);
}

function teardown() {
  window.removeEventListener("resize", handleResize);
}

Practica en inglés

¿Cómo le explicarías un Event Listener Memory Leak a un compañero dev? Elige la frase correcta:

"I hit an error...

¿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