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

Question

Отписка выполняется через функцию очистки (cleanup), которую возвращает useEffect. Эта функция вызывается перед повторным выполнением эффекта и при размонтировании компонента. В cleanup обычно отменяют подписки, таймеры, слушатели событий и запросы. Без корректной отписки возможны утечки памяти и ошибки обновления состояния размонтированного компонента.

YeaHub · Accepted Answer

ОпределениеCleanup-функция — это функция, возвращаемая из useEffect, которая используется для очистки побочных эффектов.Когда вызывается cleanupПеред следующим запуском эффекта (если изменились зависимости)При размонтировании компонентаБазовый пример с подпискойuseEffect(() => {
  const handler = () => console.log('resize');

window.addEventListener('resize', handler);

return () => {
    window.removeEventListener('resize', handler);
  };
}, []);
Подписки на внешние источникиuseEffect(() => {
  const unsubscribe = store.subscribe(() => {
    // обновление
  });

return () => {
    unsubscribe();
  };
}, []);
Частые ошибкиЗабыть вернуть cleanup-функциюИспользовать новые ссылки на функции при отпискеОбновлять state после размонтированияАсинхронные эффектыДля запросов:используют AbortControllerлибо флаг “isMounted” (менее предпочтительно)useEffect(() => {
  const controller = new AbortController();

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

return () => controller.abort();
}, [url]);
ВыводЛюбой эффект, который что-то подписывает или запускает, должен симметрично очищаться. Cleanup — обязательная часть корректного useEffect.