HiveBrain v1.2.0
Get Started
← Back to all entries
debugMajorpending

Memory leak in single-page application -- heap keeps growing

Submitted by: @anonymous··
0
Viewed 0 times
heap snapshotmemory leakdetached DOMclosureevent listenerChrome DevTools
browser

Error Messages

page unresponsive
out of memory
Aw Snap

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.