Как cleanup-функция помогает решить race condition?

Определение

Cleanup-функция — это функция, возвращаемая из useEffect, которая выполняется при очистке эффекта.

useEffect(() => {
  return () => {
    // cleanup
  };
}, []);

Как cleanup предотвращает race condition

Сначала разберём идею на уровне логики.

1. Эффект запускает запрос

2. Зависимости меняются

3. React вызывает cleanup предыдущего эффекта

4. Старый запрос становится “неактуальным”

5. Новый эффект запускает новый запрос

Подход 1: Флаг актуальности

Простой и часто используемый способ.

useEffect(() => {
  let isActive = true;

  fetch(`/api/search?q=${query}`)
    .then(res => res.json())
    .then(data => {
      if (isActive) {
        setResults(data);
      }
    });

  return () => {
    isActive = false;
  };
}, [query]);

Здесь:

1. Старый эффект помечается как неактивный

2. Его результат игнорируется

3. State обновляется только актуальным запросом

Подход 2: AbortController

Более “правильный” вариант для сетевых запросов.

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

  fetch(`/api/search?q=${query}`, {
    signal: controller.signal
  })
    .then(res => res.json())
    .then(data => {
      setResults(data);
    })
    .catch(err => {
      if (err.name !== "AbortError") {
        throw err;
      }
    });

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

Почему cleanup — ключевой механизм

1. Он синхронизирован с жизненным циклом компонента

2. Работает при каждом изменении зависимостей

3. Позволяет явно управлять “актуальностью” эффектов

Вывод

Cleanup-функция помогает решить race condition, отменяя или игнорируя устаревшие запросы. Это обязательный инструмент при работе с асинхронными эффектами в React.