When working with Axios in React, you often make API requests inside components using useEffect. However, if a component unmounts before a request finishes, trying to update state afterward can cause errors and memory leaks. To handle this, Axios supports request cancellation using the standard AbortController API.

To cancel an Axios request, you create an AbortController instance and pass its signal to the request. Inside your useEffect, you return a cleanup function that calls the controller's abort() method. This ensures that if the component unmounts, the request is canceled and no further state updates will occur.

Here is how you can cancel a request in a React component:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    axios
      .get(`/api/users/${userId}`, {
        signal: controller.signal,
      })
      .then((response) => {
        setUser(response.data);
      })
      .catch((err) => {
        if (axios.isCancel(err)) return;
        setError(err);
      });

    return () => {
      controller.abort();
    };
  }, [userId]);

  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>Loading...</div>;
  return <div>Welcome, {user.name}!</div>;
}

export default UserProfile;

In this example, the Axios request is tied to an AbortController. If the UserProfile component unmounts before the request completes, the cleanup function aborts the request, preventing state updates on an unmounted component and avoiding memory leaks.

Managing request lifecycles effectively is essential in React. Always clean up pending requests in useEffect when working with asynchronous operations. This keeps your UI predictable and prevents subtle bugs caused by outdated or incomplete requests.