How do you cancel pending fetches using AbortController?

What's really being asked

This question probes your ability to manage asynchronous side effects in user-driven event streams. Interviewers want to see that you understand the AbortController API, can prevent race conditions where an older fetch resolves after a newer one, and know how to handle the specific promise rejection that aborting produces. It also surfaces whether you think about memory leaks and network efficiency in production UI code.

The full answer

First, declare a mutable variable outside the handler to hold the current AbortController instance. Second, inside the search handler, check if a controller exists and call abort() on it before creating a new one. Third, instantiate a fresh AbortController and assign it to that variable. Fourth, pass controller.signal into the fetch options object as the signal property. Fifth, wrap the fetch call in a try-catch block and suppress the AbortError by checking if error.name equals AbortError so you do not log spurious failures. Sixth, mention that aborting triggers a DOMException with name AbortError and that fetch promises reject with it.

The mistakes people make

A major red flag is suggesting debounce alone without cancellation, because a 300 millisecond debounce still leaves a window where rapid typing can overlap requests. Another mistake is calling abort() without catching the resulting exception, which creates unhandled promise rejections. Some candidates propose a global flag like isLoading and ignoring responses, which prevents stale data but wastes bandwidth and server resources. Storing the controller in React state instead of a ref or closure variable is also wrong because state updates are asynchronous and batched, so you might abort the wrong request or trigger extra renders.

What usually comes next

The interviewer might ask how you would handle this in React specifically, where you should store the controller in a useRef to avoid re-renders and clean it up in a useEffect return function on component unmount. They might also ask what happens if you abort after the fetch has already completed, which is safe and simply a no-op. Another variant is asking how to cancel multiple in-flight requests at once, where you would keep an array of controllers and abort each one. You might also be asked to compare AbortController against Axios cancel tokens or against simply ignoring stale responses.

A concrete example

Imagine a search box firing on every keystroke. Without cancellation, typing abc quickly initiates three requests. If the a query is slow and resolves after c, the UI flashes the wrong results. With AbortController, on the b keystroke you abort the a request, and on c you abort b. The browser cancels the TCP connection or stops processing the response, saving roughly 100 to 500 milliseconds of wasted network time per skipped request depending on payload size. Your catch block silently discards the AbortError, and only the c response renders.