Каких антипаттернов избегать в компоненте с асинхронной логикой?

Асинхронная логика в компонентах — главный источник «плавающих» багов. Антипаттерны типовые, и каждый имеет известное лечение.

Гонки запросов (race conditions)

Запросы по смене параметра могут завершаться не по порядку — последний пришедший ответ побеждает, даже если он от устаревшего запроса:

useEffect(() => {
  let stale = false;
  fetchResults(query).then((data) => {
    if (!stale) setResults(data);   // игнорируем устаревший ответ
  });
  return () => { stale = true; };   // или AbortController
}, [query]);

Антипаттерн — fetch в эффекте без отмены/флага.

setState после размонтирования

Ответ пришёл, а компонента нет: лишняя работа и утечки логики (предупреждение об этом React убрал в версии 18). Лечение то же — отмена в cleanup (AbortController) или флаг.

async-функция прямо в useEffect

useEffect(async () => ...) — эффект должен вернуть cleanup, а не Promise. Асинхронность оформляется внутри (IIFE или именованная функция).

Отсутствие обработки состояний

Только «данные»: без loading и error UI молчит при медленной сети и падает при ошибке. Моделировать статус явно (idle/loading/success/error), а не набором рассинхронизирующихся булевых флагов.

Цепочки эффектов

Эффект A ставит state, который триггерит эффект B, тот — C: водопад ререндеров, неотлаживаемая причинность. Объединять логику в один эффект/функцию или выносить в событие.

Дубли запросов

Каждый экземпляр компонента сам грузит те же данные; StrictMode удваивает. Лечение: дедупликация на уровне кеша — TanStack Query/RTK Query (по сути, снимают и гонки, и статусы, и отмену разом).

Забытая зависимость / устаревшее замыкание

Колбэк таймера/подписки видит state первого рендера. Функциональные сеттеры, честные deps, ref для «всегда актуального».

Коротко для собеседования

Избегать: fetch без отмены (гонки, setState после unmount), async-эффектов, отсутствия loading/error-состояний, цепочек эффектов, дублей запросов и stale closures. Системное решение большинства пунктов — React Query + AbortController + явное моделирование статуса.