Извлечение данных с помощью перехватчиков React очищает асинхронный обратный вызов

Вы можете использовать хук useRef для хранения любого изменяемого значения, которое вам нравится, поэтому вы можете использовать его для переключения переменной isMounted на false, когда компонент размонтирован, и проверить, является ли эта переменная true, прежде чем пытаться обновить состояние.

Пример

const { useState, useRef, useEffect } = React;

function apiCall() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Foo");
    }, 2000);
  });
}

const InsideCompontent = props => {
  const [state, setState] = useState({ isLoading: true, data: null });
  const isMounted = useRef(true);

  useEffect(() => {
    apiCall().then(data => {
      if (isMounted.current) {
        setState({ isLoading: false, data });
      }
    });

    return () => {
      isMounted.current = false
    };
  }, []);
  
  if (state.isLoading) return <div>Loading...</div>
  return <div>{state.data}</div>;
};

function App() {
  const [isMounted, setIsMounted] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsMounted(false);
    }, 1000);
  }, []);

  return isMounted ? <InsideCompontent /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id = "root"></div>

Предполагая, что это ошибка, с которой вы столкнулись:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

React жалуется и намекает одновременно. Если компонент необходимо размонтировать, но есть ожидающий сетевой запрос, его следует отменить. Возврат функции изнутри useEffect — это механизм для выполнения любой требуемой очистки (документы).

Основываясь на вашем примере с setTimeout:

const [fetching, setFetching] = useState(true);

useEffect(() => {
    const timerId = setTimeout(() => {
      setFetching(false);
    }, 4000);

    return () => clearTimeout(timerId)
  })

В случае размонтирования компонента до срабатывания обратного вызова таймер сбрасывается и setFetching вызываться не будет.

Вот хук для извлечения данных, которые мы используем внутри. Он также позволяет манипулировать данными после их извлечения и будет выбрасывать данные, если другой вызов будет сделан до завершения вызова.

https://www.npmjs.com/package/use-data-hook

(Вы также можете просто включить код, если вам не нужен весь пакет)

^ Также это преобразуется в JavaScript, просто удаляя типы.

Он частично вдохновлен эта статья, но с большими возможностями, поэтому, если вам не нужны манипуляции с данными, вы всегда можете использовать решение из этой статьи.