AbortController: Stop Fetch Requests You No Longer Need
An AbortController is a kill switch for network requests. Use it to cancel a fetch when a user navigates away. The main footgun is not handling the AbortError that fetch throws, which can look like a real network failure.
Why it exists
Without a cancellation mechanism, a fetch request will run to completion even if the user no longer needs the data. This wastes network bandwidth and CPU cycles. It can also lead to bugs where a slow, old request resolves after a newer one, overwriting the UI with stale data.
The mental model
Think of AbortController as a two-part system: a detonator (the controller) and a receiver (the signal). You plant the receiver on the asynchronous operation, like a fetch request. You hold onto the detonator. When you press the button by calling controller.abort(), it sends a signal to the receiver, which terminates the operation.
How it works
First, you instantiate a controller: const controller = new AbortController(). Second, you get its signal: const signal = controller.signal. Third, you pass this signal into the options object of your fetch call: fetch(url, { signal }). The fetch promise will now listen for an abort event on that signal. To cancel, you simply call controller.abort(). When aborted, the fetch promise rejects with a DOMException named AbortError, which you must handle in your catch block.
When to use it
Use AbortController in any scenario where an async operation might become irrelevant before it completes. Common cases include: cancelling data fetching in a React component's useEffect cleanup function when the component unmounts; stopping a previous search request when a user types a new query in a search bar; or abandoning a large file upload if the user navigates away.
When not to use it
Don't use it for operations that must complete, like a critical 'save' action. Overusing it can add complexity without benefit for very short-lived, essential requests. It only works with APIs that are designed to accept an AbortSignal, like the Fetch API.
One canonical example
A common pattern in React is to fetch data in a useEffect hook. To prevent state updates on an unmounted component, you can return a cleanup function from the effect. This is the perfect place to call abort(). For example: useEffect(() => { const controller = new AbortController(); fetchData(controller.signal); return () => controller.abort(); }, []);. When the component unmounts, the cleanup function aborts any in-flight request from that effect.
Interview question
What is the main benefit of using AbortController when managing fetch requests in a dynamic web application?
- a.It prevents resource waste and potential UI inconsistencies by stopping fetch requests that are no longer relevant.Correct
- b.It ensures that all fetch requests complete their execution, even if the user navigates away from the page.
- c.It allows for automatic retries of fetch requests that encounter temporary network failures.
- d.It provides a standardized way to handle all types of DOMException errors thrown by fetch.
Why? this is the answer
The primary benefit of AbortController is to cancel fetch requests that are no longer relevant, which saves network bandwidth and CPU cycles, and prevents the UI from being updated with stale data. It does not guarantee completion, provide automatic retries, or standardize handling for all DOMException errors.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles