Как отследить mount и unmount компонента?

В функциональных компонентах React жизненный цикл контролируется через useEffect.

Определение

• Mount — момент, когда компонент впервые добавляется в DOM.

• Unmount — момент, когда компонент удаляется из DOM.

Отслеживание mount

useEffect(() => {
  console.log("component mounted");
}, []);

Почему это работает

1. Пустой массив зависимостей означает запуск эффекта только после первого рендера.

2. Эффект выполняется один раз (за исключением StrictMode в dev).

Отслеживание unmount

useEffect(() => {
  return () => {
    console.log("component unmounted");
  };
}, []);

Что происходит

1. React вызывает cleanup-функцию.

2. Компонент удаляется из DOM.

3. Все связанные ресурсы должны быть очищены.

Частые кейсы использования

1. Логирование жизненного цикла.

2. Подписки / отписки.

3. Инициализация и очистка сторонних библиотек.

Вывод

useEffect с пустым массивом зависимостей — стандартный и надёжный способ отследить mount и unmount компонента.