Skip to main content

Demo 24

event listener leak

Listeners can retain component state after the UI is gone.

fully simulatedcurated scenariodoes not execute real code
Short answer

A registered listener is reachable from the DOM node, so captured values stay reachable too.

Real-world bug this helps solve

Heap usage grows after repeated navigation, polling, subscriptions, cache writes, or background work. Clean up window, document, and shared element listeners in component lifecycles.

Common wrong assumption

Removing DOM without removing listeners on long-lived targets.

Fix direction

Remove long-lived references, clear timers/listeners, and verify the object can be collected.

Fixed code pattern
const id = setInterval(tick, 1000);
return () => clearInterval(id);
Visual proof

The visual proof is the active runtime event: watch what is retained, blocked, queued, or released at each step.

How to verify in a real app

Repeat the workflow several times, take a heap snapshot, and confirm retained listeners, timers, or cached objects stop growing after cleanup.

Share
Loading visual timeline...

Related cases

Continue with nearby confusion while the mental model is fresh.

Recommended next

Was this clear?

This stays local for now. It helps you track where the product still needs sharper cases.

Send detail