What is a Event Listener Memory Leak?

Event listener memory leaks occur when listeners are added repeatedly without being removed, causing the count to grow indefinitely. Each listener holds a reference to its closure, preventing garbage collection of the objects it captures. This leads to increased memory usage and potential CPU overhead.

Why it happens

• •Adding a listener inside a function that is called multiple times without removing the old one.
• •In React, adding a global listener in useEffect without returning a cleanup function.
• •Anonymous arrow functions used as listeners cannot be removed with removeEventListener.
• •Single-page applications that re-run setup code on every navigation without teardown.

Examples

// Called on every route change
function setup() {
  window.addEventListener("resize", () => {
    console.log("resized");
  });
}

// No immediate error, but memory and CPU usage grow over time.
// Chrome DevTools > Memory > Heap snapshot shows growing listener count.

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

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

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

Related errors

• MaxListenersExceededWarning
• useEffect Missing Dependency