A junior ships a “tiny framework”. Every component is a render function that builds its own DOM and binds its own addEventListener calls. Works on the first render. The reviewer opens it in Chrome, clicks a few things, merges the PR on a Friday afternoon.

A week later the memory graph is a staircase. Every minute the app runs, the JS heap grows another megabyte. Users on long sessions see tabs crash. The bug queue fills with “slow over time” reports that don't reproduce in QA — which only runs 30-second smoke tests. The leak is invisible in small cases and obvious once the room has been swapped a few hundred times.

Each lamp above is a child “component”. Each one binds its OWN click listener in mount. There is no teardown step — when the parent rerenders, it overwrites root.innerHTML with a fresh template, which DETACHES the old DOM but leaves the listeners bound to those detached nodes. Tap the “swap room” button a few times, then look at the listener counter.

// The junior's first render function. Works, leaks.

function render(root, state) {

  root.innerHTML = template(state);

  root.querySelectorAll('button').forEach((btn, i) => {

    btn.addEventListener('click', () => {

      state.value = i;

      render(root, state);   // blows away DOM, orphans listeners

    });

  });

}

Three probes ahead, each one a different user group hurting from the same absent pattern. Predict before each reveal — the probe answer is how the felt wall lands.