Почему важно очищать побочные эффекты в React?

В React компоненты могут создавать побочные эффекты (side effects), такие как запросы к API, подписки на события, таймеры или ручное изменение DOM. Эти операции часто выполняются внутри хука useEffect. Если компонент удаляется из DOM (размонтируется), а эффект продолжает работать, это может привести к утечкам памяти, ошибкам в логике (например, попытке обновить состояние несуществующего компонента) или ненужной нагрузке на систему.

Как работает очистка

Хук useEffect позволяет вернуть функцию очистки (cleanup function). Эта функция автоматически вызывается React в двух случаях:

• Перед выполнением того же эффекта при следующем рендере (если зависимости изменились).
• Перед размонтированием компонента (когда он удаляется из DOM).

Этот механизм гарантирует, что ресурсы, созданные эффектом, будут освобождены вовремя.

Примеры кода

Рассмотрим пример с подпиской на событие resize окна браузера:

import React, { useState, useEffect } from 'react';

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    // Побочный эффект: подписка на событие
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // Функция очистки: отписка от события
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Пустой массив зависимостей = эффект только при монтировании

  return Ширина окна: {width}px;
}

Без функции очистки при каждом размонтировании компонента слушатель события оставался бы активным, вызывая ненужные обновления и потенциальные утечки памяти.

Где это применяется

Очистка эффектов критически важна для:

• Отмены сетевых запросов (например, с помощью AbortController).
• Остановки интервалов (setInterval) и таймаутов (setTimeout).
• Закрытия WebSocket-соединений или подписок на внешние хранилища (например, RxJS).
• Отмены любых асинхронных операций, которые могут попытаться обновить состояние после размонтирования.

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