Debugging JavaScript Memory Leaks in React Applications

A client reported that their React dashboard became sluggish after being open for a few hours. The browser tab memory usage climbed from 150MB to over 800MB. Classic memory leak symptoms.

Finding the Leak with Chrome DevTools

The Memory tab in Chrome DevTools is your best friend. I took heap snapshots before and after navigating between pages, then compared them to see what was growing:

Steps: Open DevTools, go to the Memory tab, select “Heap snapshot,” click “Take snapshot.” Navigate around the app. Take another snapshot. Select the second snapshot and change the view to “Comparison” with the first snapshot.

The Three Common Culprits

1. Forgotten event listeners. Adding listeners in useEffect without cleanup:

// Bad: listener accumulates on every render
useEffect(() => {
    window.addEventListener("resize", handleResize);
});

// Good: cleanup removes the listener
useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, []);

2. Stale closures holding references. Intervals and timeouts that capture component state:

// Bad: interval keeps running after unmount
useEffect(() => {
    const id = setInterval(() => fetchData(), 5000);
    // Missing: return () => clearInterval(id);
}, []);

3. Subscriptions not unsubscribed. WebSocket connections, observable subscriptions, or third-party library listeners that are never torn down.

The Fix

Every useEffect that sets up a listener, interval, or subscription needs a cleanup function. This is not optional — it is how React prevents memory leaks. After adding proper cleanup to three components, the memory usage stabilized at 180MB regardless of how long the app was open.