How do you stop a debounced input handler from using stale state in a real UI?

programming web dev
1

Yo folks, I’m wiring up a search box with keyboard shortcuts and I’m trying to debounce the input handler, but I keep hitting a weird failure mode where the handler runs with stale state (like an old query or old filter) after a fast sequence of key events.

function setupSearch(input, getState, onSearch) {
  let t;

  input.addEventListener("input", (e) => {
    const value = e.target.value;

    clearTimeout(t);
    t = setTimeout(() => {
      // sometimes uses old filters when user toggles them quickly
      onSearch({ query: value, filters: getState().filters });
    }, 250);
  });
}

What pattern do you use to debounce DOM input events without stale closures or racey state reads when other UI events can change state in between?