How to Detect and Fix Memory Leaks in JavaScript Applications

Question

Your single-page app becomes slower over time, and the memory usage keeps increasing in Chrome DevTools.

How do you find and fix the memory leaks?

Explanation

A memory leak occurs when objects that are no longer needed are still referenced somewhere in memory.

Common leak patterns:

• Event listeners not removed
• Unused intervals/timeouts
• Detached DOM elements kept in closures
• Global variables keeping stale data

Example: Leaking DOM Node

function leakExample() {
  const el = document.getElementById('btn');
  el.addEventListener('click', () => console.log(el.id)); // closure holds reference
  document.body.removeChild(el); // DOM node removed, but still referenced
}

✅ Fix by removing listeners before detaching:

el.removeEventListener('click', handler);
document.body.removeChild(el);

Visualization

graph TD
A[DOM Node Created] --> B[Attached Event Listener]
B --> C[Node Removed from DOM]
C --> D[Reference Persisting in Closure 🔴]
D --> E[Memory Not Garbage Collected]

Summary

• Use Performance → Memory tab in DevTools
• Look for Detached DOM Trees
• Avoid circular references
• Use WeakMap / WeakRef for temporary object caching
• Always clean up event listeners and intervals