Diagnosing Memory Leaks and Detached DOM Nodes

1. What Are Memory Leaks in React SPAs?

In traditional multi-page websites, navigating to a new page completely purges the browser's memory heap, wiping out any memory leaks.

In a Single-Page Application (SPA), users may keep a single tab open for hours or days. If components leak memory when mounting and unmounting:

• JavaScript heap memory expands continuously over time.
• The browser tab slows down, stutters during scrolling, and eventually crashes with an Out of Memory (OOM) error.
• Unmounted components continue executing background code, creating phantom network calls and state warnings.

2. The Top 3 Sources of React Memory Leaks

Leak 1: Uncleaned Event Listeners

Attaching listeners to global objects (window, document) inside useEffect without removing them in the cleanup function:

Leak 2: Dangling Timers and Intervals

Leak 3: Detached DOM Nodes Held by Closures

A Detached DOM Node occurs when a DOM element has been removed from the page's visible DOM tree, but a lingering JavaScript variable, closure, or event callback still holds a reference to it in memory, preventing the browser's Garbage Collector from freeing its memory.

3. Detecting Leaks with Chrome DevTools Memory Profiler

To diagnose real memory leaks:

1. 1
   Open Chrome DevTools -> Memory tab.
2. 2
   Select Allocation instrumentation on timeline or Heap snapshot.
3. 3
   Perform the user action (e.g. open a modal, then close it).
4. 4
   Click the garbage can icon to Collect Garbage (GC) manually.
5. 5
   Take a Heap Snapshot.
6. 6
   In the Class Filter, search for Detached.

If you see Detached HTMLDivElement or Detached FiberNode, inspect the Retainers Tree at the bottom of the panel to see the exact closure or reference preventing garbage collection!