The AbortController API in React's useEffect hook

The AbortController API in React’s useEffect hook can be used to cancel asynchronous tasks such as API requests when a component unmounts or when a dependency changes. Here’s a quick example:

In this example:

• We create a new AbortController instance and obtain its signal.
• We use this signal in the fetch request’s options to allow us to abort the fetch request if needed.
• The useEffect hook runs when the component mounts, and it sets up the data fetching logic. It also returns a cleanup function, where we call abort() on the AbortController instance when the component unmounts.
• By cleaning up the effect, we prevent memory leaks and avoid updating the state of an unmounted component.

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data", {
          signal,
        });
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching data:", error);
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort();
    };
  }, []); // Empty dependency array means this effect runs only once

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {/* Render your data here */}
          <p>{data}</p>
        </div>
      )}
    </div>
  );
};

export default MyComponent;

Important Note on Modern Data Fetching

While this article demonstrates using useEffect with AbortController for data fetching, it’s worth noting that the React team no longer recommends using useEffect for data fetching in production applications. The current recommendations are:

• For framework-based apps (Next.js, Remix): Use React Server Components for server-side data fetching
• For SPAs: Use dedicated libraries like TanStack Query (formerly React Query) for client-side data fetching
• For React Router apps: Use loader functions for route-based data fetching

These modern approaches provide better caching, error handling, and help avoid common pitfalls like network waterfalls. However, understanding how AbortController works with useEffect is still valuable for educational purposes and for managing other types of asynchronous operations beyond data fetching.