Как реализовать отменяемый useEffect (cleanup-функция) для асинхронного запроса?

Проблема асинхронных запросов в useEffect

Когда компонент выполняет асинхронный запрос внутри useEffect, запрос может завершиться уже после того, как компонент будет размонтирован. Если в этот момент попытаться обновить состояние (setState), React выдаст предупреждение о памяти. Чтобы избежать этого, необходимо отменять запрос или игнорировать его результат при очистке эффекта.

Решение с AbortController

Современный способ — использовать AbortController, который позволяет отменить fetch-запрос. Создайте контроллер внутри эффекта, передайте его сигнал в fetch, а в cleanup вызовите abort().

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

  fetch('/api/data', { signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });

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

Решение с флагом

Если вы не используете fetch (например, axios или setTimeout), можно установить флаг, который проверяется перед обновлением состояния.

useEffect(() => {
  let cancelled = false;

  fetchData().then(data => {
    if (!cancelled) setData(data);
  });

  return () => { cancelled = true; };
}, []);

Вывод

Используйте AbortController для fetch-запросов — это стандартный и надёжный способ отмены. Для других асинхронных операций подойдёт флаг. Всегда очищайте эффекты, чтобы избежать утечек памяти и ошибок в React-приложениях.