Debug: Memory leak in single-page applications

Single-page application memory usage grows over time as users navigate, eventually becoming slow or crashing.

Common SPA memory leaks and fixes:

1. Event listeners not cleaned up:

// BAD:
useEffect(() => {
window.addEventListener('resize', handler);
}, []);
// GOOD:
useEffect(() => {
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);

1. Timers not cleared:

useEffect(() => {
const id = setInterval(poll, 5000);
return () => clearInterval(id);
}, []);

1. AbortController for abandoned requests:

useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal }).then(...);
return () => controller.abort();
}, [url]);

1. Closures holding references:

// Closure captures large data that's no longer needed
// Fix: null out references when done

1. Detached DOM nodes:

// Saving references to removed elements
// Check: DevTools > Memory > Heap Snapshot > Detached

1. Growing arrays/maps used as caches:

// Add eviction: LRU cache, max size, TTL

1. WebSocket/SSE connections not closed:

useEffect(() => {
const ws = new WebSocket(url);
return () => ws.close();
}, []);

Debug tools:

• Chrome DevTools > Memory > Take heap snapshot
• Compare snapshots to find growing objects
• Performance Monitor > JS Heap Size