Как получить доступ к монтированию и размонтированию компонента?

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

Функциональные компоненты (с хуками)

С появлением хуков, стандартным способом является использование useEffect. Его логика следующая:

• Эффект выполняется после того, как React обновил DOM.
• Если вторым аргументом передан пустой массив [], эффект выполнится только один раз — после первого рендера (монтирования).
• Функция, которую возвращает эффект, является функцией очистки. React вызовет её непосредственно перед размонтированием компонента.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Код здесь выполняется при монтировании
    console.log('Компонент смонтирован');
    const timerId = setInterval(() => console.log('Тик'), 1000);

    // Возвращаемая функция — cleanup для размонтирования
    return () => {
      console.log('Компонент будет размонтирован');
      clearInterval(timerId); // Очистка таймера
    };
  }, []); // Пустой массив зависимостей

  return Пример;
}

Классовые компоненты

В классовых компонентах для этого используются специальные методы жизненного цикла:

• componentDidMount() вызывается сразу после монтирования компонента.
• componentWillUnmount() вызывается непосредственно перед размонтированием и удалением компонента.

import React from 'react';

class MyClassComponent extends React.Component {
  componentDidMount() {
    console.log('Компонент смонтирован');
    this.timerId = setInterval(() => console.log('Тик'), 1000);
  }

  componentWillUnmount() {
    console.log('Компонент будет размонтирован');
    clearInterval(this.timerId);
  }

  render() {
    return Пример класса;
  }
}

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

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