Как корректно отписываться от подписок в useEffect

Определение

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

Когда вызывается cleanup

1. Перед следующим запуском эффекта (если изменились зависимости)

2. При размонтировании компонента

Базовый пример с подпиской

useEffect(() => {
  const handler = () => console.log('resize');

  window.addEventListener('resize', handler);

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

Подписки на внешние источники

useEffect(() => {
  const unsubscribe = store.subscribe(() => {
    // обновление
  });

  return () => {
    unsubscribe();
  };
}, []);

Частые ошибки

1. Забыть вернуть cleanup-функцию

2. Использовать новые ссылки на функции при отписке

3. Обновлять state после размонтирования

Асинхронные эффекты

Для запросов:

1. используют AbortController

2. либо флаг “isMounted” (менее предпочтительно)

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

  fetch(url, { signal: controller.signal });

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

Вывод

Любой эффект, который что-то подписывает или запускает, должен симметрично очищаться. Cleanup — обязательная часть корректного useEffect.