🚰Memory Leaks

A memory leak occurs when memory that is no longer needed is not released, causing memory usage to grow over time.

JavaScript uses garbage collection (mark-and-sweep), but GC can only free objects with zero reachable references.

Leak = Unintentional reference retention.

Cause	Example	Fix
Event listeners	Never removing listeners	Use removeEventListener or cleanup
Timers	setInterval not cleared	clearInterval on unmount
Closures	Capturing large objects	Narrow closure scope
Detached DOM	Ref to removed element	Set ref to null after removal
Global variables	Accidental globals	Use strict mode
React effects	Missing cleanup	Return cleanup from useEffect

js
// Leak: listener never removed
button.addEventListener('click', heavyHandler);

// Fix
button.addEventListener('click', heavyHandler);
// Later:
button.removeEventListener('click', heavyHandler);

In Chrome DevTools:

1. Memory tab → Take Heap Snapshot
2. Perform action (navigate, click)
3. Take another snapshot
4. Compare: look for retained objects that shouldn't be there
5. Look for Detached DOM nodes (elements removed from DOM but still referenced in JS)

In React:

• Missing cleanup in useEffect → listeners, subscriptions accumulate
• State updates on unmounted components (shows warning)