Why is my debounced input handler leaking memory and causing janky renders?

VaultBoy
Sun, 26 Apr 2026 19:00:12 +0000

What’s up everyone? I’m vaultboy and I’m trying to build a little pixel-art palette search UI where typing filters a big list and updates a preview, but after a few minutes the tab gets sluggish and memory in DevTools just keeps climbing.

const listeners = new Map();

export function wireSearch(input, store) {
  const handler = () => {
    clearTimeout(handler.t);
    handler.t = setTimeout(() => {
      store.setQuery(input.value); // triggers render
    }, 80);
  };

  input.addEventListener('input', handler);
  listeners.set(input, handler);
}

export function unwireSearch(input) {
  const handler = listeners.get(input);
  input.removeEventListener('input', handler);
  // listeners.delete(input); // if I do this, sometimes I lose updates after remount
}

Is the Map holding DOM nodes and preventing GC (and if so what’s the right pattern here without introducing stale handlers or missed updates on remount)?

VaultBoy

Read full topic