JavaScript Memory Leak Detector

The most common sources: (1) event listeners added in useEffect without cleanup (removeEventListener in return function), (2) setInterval/setTimeout not cleared, (3) subscriptions to observables, WebSockets, or EventEmitters without unsubscribing, (4) setState/dispatch called after component unmount in async callbacks, (5) closures that reference large objects preventing garbage collection, (6) global caches (window.myCache) growing without bounds.

Open DevTools → Memory tab. Method 1 - Heap Snapshot: take a snapshot, perform actions, take another snapshot, compare 'Objects allocated between snapshots' to find growing objects. Method 2 - Allocation Timeline: record while performing repeated actions, look for object counts that grow each iteration but never shrink. Method 3 - Performance Monitor: watch JS heap size in real time — it should fluctuate but trend flat, not steadily upward.

When a component unmounts, React expects it to clean up. If an async operation (fetch, setTimeout) completes after unmount and calls setState, React can't update a non-existent component. Before React 18, this caused the warning 'Can't perform a React state update on an unmounted component'. While React 18 removed the warning, the underlying issue remains: the component isn't garbage collected until all async references to it are resolved, causing a temporary memory leak.

AbortController creates a signal that can cancel a fetch request. When passed to fetch({ signal: controller.signal }), aborting the controller cancels the HTTP request and causes the Promise to reject with AbortError. In useEffect cleanup (return function), call controller.abort() — this cancels any in-flight request when the component unmounts, preventing the then() callbacks from running and setState from being called on an unmounted component.

WeakMap and WeakSet hold 'weak references' to their keys — if no other code holds a reference to the key object, it can be garbage collected even if it's still a key in the WeakMap. This prevents the common pattern of module-level caches holding DOM nodes or component instances indefinitely. Use WeakMap for object-keyed caches: const cache = new WeakMap(); cache.set(element, computedData). When element is removed from DOM and dereferenced, its cache entry is automatically eligible for GC.

Monitor heap usage with Node.js: process.memoryUsage().heapUsed in a /api/health endpoint or PM2 monitoring. Use node --inspect and Chrome DevTools remote debugging for production-like profiling. Install clinic.js (npm install -g clinic) for automated leak detection: clinic heapdump -- node server.js then load with heapdump.clinic.sh. For React: React DevTools Profiler shows component memory usage. Enable Chrome's 'Record allocation profiles' in Memory tab on production-like data.