Что произойдёт, если значение в зависимостях useEffect изменится несколько раз подряд за короткое время?

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

Как это работает по шагам

1. Компонент рендерится, зависимости изменились — React планирует эффект.
2. Перед запуском нового эффекта вызывается cleanup-функция от предыдущего запуска (если она возвращена).
3. Запускается новый эффект с актуальным значением зависимости.
4. Если значение снова изменилось — шаги 2–3 повторяются.

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

Пример с отменой запроса

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

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

  return () => controller.abort(); // отменяем предыдущий запрос
}, [query]);

Здесь при быстром изменении query каждый предыдущий запрос будет отменён через cleanup, и в состояние попадёт только результат последнего.

Типичные проблемы

• Лишние сетевые запросы при быстром вводе — решается debounce или отменой.
• Утечки памяти, если подписки не отписываются в cleanup.
• Гонки данных, когда старый ответ приходит позже нового.
• Бесконечные циклы, если в зависимостях объект или функция, создаваемые заново на каждом рендере.

Чтобы избежать лишних срабатываний, зависимости делают примитивами, мемоизируют объекты через useMemo, функции через useCallback, а частые изменения (например, ввод) обрабатывают через debounce.

Итог: применяйте cleanup и отмену операций внутри useEffect всегда, когда эффект зависит от быстро меняющихся значений — это защищает от гонок, утечек и лишней нагрузки.