How to cancel a fetch on componentWillUnmount

In React, components may initiate API requests during their lifecycle, such as fetching data via AJAX. If these requests are not completed when the component unmounts, they can cause memory leaks or attempts to set the state of the unmounted component, leading to errors.

To avoid this, we can cancel these pending requests when the component unmounts. Here are several common methods to achieve this:

Using AbortController (Recommended for Fetch API)

AbortController is a native JavaScript API that can be used to cancel one or more web requests. It is particularly suitable for requests initiated with the Fetch API.

Example code:

jsx
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('https://api.example.com/data', { signal })
      .then(response => response.json())
      .then(data => {
        // Process data
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          console.error('Fetch error:', error);
        }
      });

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

  return <div>Component Content</div>;
}

In this example, we create an instance of AbortController and obtain a signal object, passing it as an option to fetch. When controller.abort() is called, all requests using this signal will be canceled.

Using Axios's Cancel Token

If you use Axios to initiate HTTP requests, Axios provides the ability to cancel requests using a cancel token.

Example code:

jsx
import React, { useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    axios.get('https://api.example.com/data', {
      cancelToken: source.token
    }).then(response => {
      // Process data
    }).catch(function (thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        console.error('Request failed', thrown);
      }
    });

    return () => {
      source.cancel('Component unmounting, operation canceled');
    };
  }, []);

  return <div>Component Content</div>;
}

In this example, we use axios.CancelToken.source() to create a cancel token and pass it through the request configuration. When the component unmounts, calling source.cancel() cancels the request.

Summary

Using these strategies can effectively prevent memory leaks and errors caused by component unmounting. Choose the method that suits your current API and properly clean up resources when the component unmounts.