How do you find and fix memory leaks in JavaScript?
Quick answer
Take heap snapshots in Chrome DevTools before and after the suspect action, compare what grew, and fix the retaining reference, which is usually a forgotten listener, timer, global variable or unbounded cache.
JavaScript uses garbage collection based on reachability: an object is freed only when nothing reachable still references it. A leak is memory that your app no longer needs but something still references.
The usual causes are event listeners that are never removed, setInterval callbacks that are never cleared, detached DOM nodes held in a variable, accidental globals, closures that capture large objects, and caches or maps that only grow. In React, a missing cleanup function in useEffect is the most common source.
To diagnose, open the DevTools Memory tab, take a snapshot, repeat the action several times, take another and use the comparison view to see which object types keep growing. The retainers panel shows the chain of references keeping an object alive. Fixes are to remove listeners and timers in cleanup code, use WeakMap or WeakRef for caches keyed by objects, and put a size limit or eviction policy on caches.
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", onResize);
const id = setInterval(refresh, 5000);
return () => { // cleanup prevents the leak
window.removeEventListener("resize", onResize);
clearInterval(id);
};
}, []);Key points
- Leak = unneeded but still reachable
- Compare heap snapshots to see what keeps growing
- Always pair listeners and timers with cleanup
Questions interviewers ask next
- What is the difference between WeakMap and Map?
- How does mark-and-sweep garbage collection work?