How can duplicate API requests be prevented in a frontend application?

[4kash7]

In a frontend application, a user can quickly trigger the same API request multiple times—for example, by rapidly changing a search/filter input or clicking a button repeatedly.

What's a clean approach to prevent unnecessary or outdated requests from updating the UI?

I'm particularly interested in the trade-offs between:

Debouncing requests
Cancelling previous requests with AbortController
Tracking request IDs or request state

What approach would you use in a production application, and why?

[sanyukt63]

For search/filter inputs, I would generally combine debouncing with AbortController.

1. Debounce user input

Instead of making a request on every keystroke, wait until the user stops typing for a short period.

let timer;

function search(query) {
  clearTimeout(timer);

  timer = setTimeout(() => {
    fetchResults(query);
  }, 300);
}


Code:-
let controller;

async function fetchResults(query) {
  controller?.abort();
  controller = new AbortController();

  try {
    const response = await fetch(
      `/api/search?q=${encodeURIComponent(query)}`,
      { signal: controller.signal }
    );

    const data = await response.json();
    updateUI(data);
  } catch (error) {
    if (error.name !== "AbortError") {
      console.error(error);
    }
  }
}