debugMajorpending
Memory leak in single-page application -- heap keeps growing
Viewed 0 times
heap snapshotmemory leakdetached DOMclosureevent listenerChrome DevTools
browser
Error Messages
Problem
SPA heap size grows over time until the browser tab crashes. Performance degrades as user navigates between pages. Common in React, Vue, Angular apps.
Solution
Common causes: (1) Event listeners not removed on component unmount -- use cleanup in useEffect/onUnmounted. (2) setInterval/setTimeout not cleared. (3) Closures holding references to large objects or DOM nodes. (4) Global stores accumulating data without eviction. (5) Detached DOM nodes from direct DOM manipulation. Debug: Chrome DevTools > Memory > Heap Snapshot. Take snapshot, navigate, take another. Compare retained objects. Look for Detached HTMLElement entries.
Why
JavaScript garbage collector cannot free memory referenced by any reachable variable. Closures, event listeners, and global stores keep references alive indefinitely.
Revisions (0)
No revisions yet.