What is the impact of memory leaks on web performance?

Memory leaks in web applications cause gradually degrading performance — pages become slow and unresponsive after extended use, requiring a reload. Common causes: Detached DOM nodes: removed elements still referenced by JavaScript (event listeners, closures). The garbage collector can't free them. Forgotten event listeners: adding event listeners without removing them, especially on global objects (window, document). Closures retaining large objects: a callback in a setInterval or setTimeout that captures a large object in its scope. Growing caches without eviction: in-memory caches (Maps, arrays) that grow indefinitely. React-specific: state updates on unmounted components, missing useEffect cleanup functions, subscriptions not cancelled on unmount. Detection tools: Chrome DevTools Memory tab → Heap Snapshot (compare snapshots to find growing objects). Performance Monitor (shows real-time JS heap). Allocation Timeline: find where allocations occur. Fixing leaks: use WeakMap/WeakSet for object associations (GC-friendly). Always clean up in useEffect return function: return () => subscription.unsubscribe(). Use AbortController for fetch requests. Clear timers and intervals. Detach event listeners on component unmount. Memory leaks are insidious — they don't cause immediate errors but degrade UX over time on long-lived sessions.