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

Question

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

YeaHub · Accepted Answer

ОпределениеCleanup-функция — это функция, возвращаемая из useEffect, которая выполняется при очистке эффекта.useEffect(() => {
  return () => {
    // cleanup
  };
}, []);
Как cleanup предотвращает race conditionСначала разберём идею на уровне логики.Эффект запускает запросЗависимости меняютсяReact вызывает cleanup предыдущего эффектаСтарый запрос становится “неактуальным”Новый эффект запускает новый запросПодход 1: Флаг актуальностиПростой и часто используемый способ.useEffect(() => {
  let isActive = true;

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

return () => {
    isActive = false;
  };
}, [query]);
Здесь:Старый эффект помечается как неактивныйЕго результат игнорируется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 — ключевой механизмОн синхронизирован с жизненным циклом компонентаРаботает при каждом изменении зависимостейПозволяет явно управлять “актуальностью” эффектовВыводCleanup-функция помогает решить race condition, отменяя или игнорируя устаревшие запросы. Это обязательный инструмент при работе с асинхронными эффектами в React.