Как реализовать аналог componentWillUnmount в функциональном компоненте?

В классовых компонентах React метод componentWillUnmount используется для очистки ресурсов перед удалением компонента из DOM. В функциональных компонентах, использующих хуки, эта логика реализуется с помощью хука useEffect.

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

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

Практический пример

Рассмотрим компонент, который подписывается на внешнее событие, например, на изменение размера окна. При размонтировании подписку необходимо удалить, чтобы избежать утечек памяти.

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

function WindowSizeTracker() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    // Эффект: подписываемся на событие
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

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

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

Ключевые моменты

• Пустой массив зависимостей ([]) гарантирует, что эффект (и очистка) выполнится только один раз при монтировании/размонтировании.
• Массив с зависимостями заставит React выполнять очистку перед каждым новым выполнением эффекта, если зависимости изменились.
• Функция очистки имеет доступ к замыканию (значениям переменных и пропсов) на момент создания эффекта, что помогает избежать "устаревших" значений.

Вывод: Используйте возвращаемую функцию из useEffect для любой логики очистки (отмена сетевых запросов, таймеров, подписок). Это основной и единственный способ имитировать componentWillUnmount в функциональных компонентах React.