Что такое cleanup в useEffect?

Разберёмся

Cleanup в useEffect — функция, которую вы возвращаете из эффекта. React вызывает её перед повторным запуском эффекта и при размонтировании, чтобы снять подписки и отменить побочные эффекты.

Канонический пример

useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  const onResize = () => measure();
  window.addEventListener('resize', onResize);

  return () => {
    clearInterval(id);
    window.removeEventListener('resize', onResize);
  };
}, []);

Без cleanup — утечки таймеров, дубли слушателей, setState на unmounted (в Concurrent ещё опаснее гонки).

Fetch

useEffect(() => {
  const ac = new AbortController();
  load(ac.signal).then(setData).catch(err => {
    if (err.name !== 'AbortError') setError(err);
  });
  return () => ac.abort();
}, [id]);

Что относят к cleanup

• clearTimeout / clearInterval
• removeEventListener
• unsubscribe WebSocket / store
• observer.disconnect()
• abort fetch
• отмена анимации

Strict Mode

В development React намеренно монтирует → cleanup → снова mount, чтобы проверить идемпотентность. «Двойной» запрос в dev — часто норма; в prod один раз (если deps стабильны).

Cleanup — признак зрелого кода с побочными эффектами.