Memory leak / detached DOM nodes
Memory the page has finished with but still holds onto, often through removed DOM nodes, making a long-lived tab steadily heavier.
See it
What it is
A memory leak is data the page no longer needs but JavaScript still keeps reachable, so garbage collection cannot reclaim it. A detached DOM node is an element removed from the document but retained by a listener, closure, array, cache, or framework reference. Repeat the same route change or modal cycle and the heap can grow every time.
Look for leaks in long-lived tabs such as dashboards, editors, and single-page apps. In Chrome DevTools, compare heap snapshots before and after repeating one action, then inspect retaining paths for objects whose count keeps rising.
Gotcha: a rising heap graph alone is not proof. Browsers delay garbage collection and keep reusable memory, so usage can fall later without a leak. Reproduce the same cycle, allow or request garbage collection in a controlled profile, and compare retained object counts. Clean up timers, observers, subscriptions, object URLs, and global listeners when their owner goes away.
Ask AI for it
Find and fix this page's memory leak with Chrome DevTools Memory. Take a baseline heap snapshot, repeat the suspect modal or route cycle 20 times, trigger garbage collection in the profiling session, and take a second snapshot. Compare object counts, type 'Detached' into the snapshot class filter to list surviving nodes, and inspect their retaining paths. Add React 'useEffect' cleanup for timers, observers, subscriptions, and event listeners; use an 'AbortController' for grouped listeners and requests; call 'URL.revokeObjectURL' for generated object URLs; and remove unbounded cache entries. Repeat the same cycle and report retained node count and heap size before and after.