Stop Flooding Your API: Use Debounce in Search Inputs

Triggering an API call on every keystroke is expensive. It creates unnecessary network traffic and can slow down both your UI and backend.

Debounce solves this by delaying the function until the user stops typing for a short time.

How it works

• User types → wait
• Keeps typing → reset timer
• Stops typing → run once

Clean implementation

function debounce(fn, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const searchInput = document.querySelector("#search");

function handleSearch(e) {
  const query = e.target.value.trim();
  if (!query) return;

  console.log("Searching:", query);
}

searchInput.addEventListener("input", debounce(handleSearch, 400));

Why it’s useful

• Reduces API calls
• Improves typing experience
• Keeps backend under control

Most search UIs feel best with a 300 to 500ms delay.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event#debouncing