Snippet

Cancelling Pending Fetch Requests on Component Unmount with AbortController

When components unmount or dependency props change before an asynchronous fetch resolves, continuing to update state can cause race conditions. Using JavaScript's native AbortController allows passing a signal to fetch, which can be triggered in the useEffect cleanup return function. Checking err.name !== 'AbortError' prevents recording intentional aborts as component errors.

snippet.js

javascript

import React, { useState, useEffect } from 'react';
 
export function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    async function loadData() {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal: controller.signal });
        if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      }
    }
 
    loadData();
    return () => controller.abort();
  }, [userId]);
 
  if (error) return <p role="alert">Error: {error}</p>;
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

react

Breakdown

const controller = new AbortController();

Instantiates a new controller to generate a cancellation signal for web requests.

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

Attaches the abort signal directly to the fetch configuration options.

if (err.name !== 'AbortError') {

Filters out DOMException abort errors so that component unmounts do not display false error UI.

return () => controller.abort();

Runs on dependency change or unmount to immediately cancel the in-flight network request.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Cancelling Pending Fetch Requests on Component Unmount with AbortController

Related