If you’ve worked with fetch in React/Next.js, you’ve probably hit this: component unmounts or state changes, but your network request is still running. Then the response lands late and updates stale state or worse, throws “state update on unmounted component.” AbortController fixes this. It’s a tiny API that lets you cancel in-flight requests cleanly.

What is AbortController?

AbortController is a browser API. You create a controller, pass its signal to fetch, and call controller.abort() whenever you want to cancel. The fetch promise rejects with a DOMException named “AbortError”. That’s the whole story.

Quick

new AbortController() → controller
controller.signal → pass to fetch
controller.abort() → cancel
catch AbortError → don’t treat it as a failure

Basic Example (Vanilla fetch)

const controller = new AbortController();

try {

const res = await fetch("/api/data", { signal: controller.signal });

const json = await res.json();

console.log(json);

} catch (err) {

if (err.name === "AbortError") {

console.log("Request aborted.");

} else {

console.error("Network error:", err);

}

}

// Somewhere else:

controller.abort();

React: Abort on Unmount

Classic pattern: start a request in useEffect, abort when the component unmounts or when deps change.

import { useEffect, useState } from "react";

export default function Users() {

const [users, setUsers] = useState([]);

const [error, setError] = useState(null);

useEffect(() => {

const controller = new AbortController();

async function load() {

try {

const res = await fetch("/api/users", { signal: controller.signal });

if (!res.ok) throw new Error(`HTTP ${res.status}`);

const data = await res.json();

setUsers(data);

} catch (err) {

if (err.name === "AbortError") return; // ignore

setError(err.message);

}

}

load();

return () => controller.abort();

}, []);

if (error) return <p>Error: {error}</p>;

return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;

}

Abort on Rapid Input (Debounced Search)

If you fire a request on every keystroke, old requests should be canceled to avoid race conditions.

import { useEffect, useState } from "react";

export default function SearchBox() {

const [q, setQ] = useState("");

const [results, setResults] = useState([]);

useEffect(() => {

if (!q) {

setResults([]);

return;

}

const controller = new AbortController();

const id = setTimeout(async () => {

try {

const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {

signal: controller.signal,

});

const json = await res.json();

setResults(json);

} catch (err) {

if (err.name === "AbortError") return;

console.error(err);

}

}, 300);

return () => {

controller.abort(); // cancel fetch

clearTimeout(id); // cancel debounce

};

}, [q]);

return (

<div>

<input value={q} onChange={e => setQ(e.target.value)} placeholder="Search..." />

<ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>

</div>

);

}

Abort with Route Changes

When the route changes, you often want to cancel page-specific requests to avoid updating a page that’s no longer shown.

"use client";

import { useEffect, useState } from "react";

import { usePathname } from "next/navigation";

export default function PageData() {

const pathname = usePathname();

const [data, setData] = useState(null);

useEffect(() => {

const controller = new AbortController();

async function load() {

try {

const res = await fetch(`/api/page-data?path=${pathname}`, {

signal: controller.signal,

cache: "no-store",

});

const json = await res.json();

setData(json);

} catch (err) {

if (err.name !== "AbortError") console.error(err);

}

}

load();

return () => controller.abort();

}, [pathname]);

if (!data) return <p>Loading...</p>;

return <pre>{JSON.stringify(data, null, 2)}</pre>;

}

Abort in Server Code (Node + fetch)

In Node the pattern is the same. You can add a timeout to auto-cancel slow requests.

export async function fetchWithTimeout(url, opts = {}, ms = 5000) {

const controller = new AbortController();

const t = setTimeout(() => controller.abort(), ms);

try {

const res = await fetch(url, { ...opts, signal: controller.signal });

return res;

} finally {

clearTimeout(t);

}

}

// usage

try {

const res = await fetchWithTimeout("https://api.example.com/data", {}, 3000);

const json = await res.json();

console.log(json);

} catch (err) {

if (err.name === "AbortError") {

console.warn("Timed out.");

} else {

console.error(err);

}

}

Abort Multiple Requests Together

You can share one controller across multiple fetches and abort them all at once.const controller = new AbortController();

const p1 = fetch("/api/a", { signal: controller.signal });

const p2 = fetch("/api/b", { signal: controller.signal });

const p3 = fetch("/api/c", { signal: controller.signal });

// Cancel all

controller.abort();

Pitfalls and Gotchas

Handle AbortError explicitly: treat it as “expected” not a failure.
Don’t reuse an aborted controller: once aborted, the signal remains aborted—create a new one.
Beware race conditions: cancel the older request before starting the new one when state changes.
Streams: if you’re reading a ReadableStream, aborting closes the stream—clean up readers.
Axios: axios has its own cancel token historically; modern axios supports AbortController via signal too.

Pattern I Like: Request Manager Hook

A reusable hook that returns a cancellable runner so you don’t repeat boilerplate.

import { useRef, useEffect } from "react";

export function useAbortable() {

const controllerRef = useRef<AbortController | null>(null);

useEffect(() => () => {

controllerRef.current?.abort();

}, []);

function run<T>(fn: (signal: AbortSignal) => Promise<T>) {

controllerRef.current?.abort(); // cancel previous

controllerRef.current = new AbortController();

const signal = controllerRef.current.signal;

return fn(signal);

}

return { run, abort: () => controllerRef.current?.abort() };

}

// usage

const { run } = useAbortable();

useEffect(() => {

run(async (signal) => {

const res = await fetch("/api/items", { signal });

const json = await res.json();

setItems(json);

}).catch(err => {

if (err.name !== "AbortError") console.error(err);

});

}, [filters]);

Testing Abort Flows

Slow your API with artificial delay (setTimeout) and verify abort prevents late state updates.
Simulate rapid interaction (type fast, switch routes) and check console for “AbortError”.
In dev tools, watch the Network tab: aborted requests should stop downloading.

When to Use AbortController

Search/autocomplete
Route transitions
Infinite scroll pagination when filters change
Timeouts around third-party APIs
Bulk operations that the user can cancel (e.g., “Stop syncing”)

How I Use AbortController To Kill Unwanted Requests

You might also like

How to Blur Placeholder for Images in Next.js

Continue Reading