Root Causes & Diagnostic Methodology:
- Definition: A memory leak occurs when memory allocated by an application is no longer needed by the program but is not reclaimed by the garbage collector due to lingering references.
1. Common JavaScript Web Memory Leaks:
- Lingering Event Listeners: Attaching listeners to window or DOM elements without removing them in component unmount lifecycles (useEffect cleanup).
- Uncleaned Timers & Subscriptions: setInterval or RxJS subscriptions that continue running in the background after UI components unmount.
- Closures: Outer function variables retained in memory by long-lived inner callback closures.
- Detached DOM Nodes: JavaScript objects retaining references to DOM elements that have been removed from the visible DOM tree.
2. Diagnostic Workflow with Chrome DevTools:
- Memory Profiler: Record a Heap Snapshot, perform the suspected leaking user action 5 times, and take a second snapshot.
- Comparison View: Filter by 'Objects allocated between snapshots'. Sort by 'Retained Size' to identify which constructors are retaining memory.
- Allocation Instrumentation on Timeline: Watch memory stair-step upward continuously without dropping after garbage collection runs.