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

Question

Mount и unmount компонента отслеживаются с помощью useEffect. Эффект с пустым массивом зависимостей [] выполняется при монтировании. Cleanup-функция этого эффекта вызывается при размонтировании. Это функциональный аналог componentDidMount и componentWillUnmount.

YeaHub · Accepted Answer

В функциональных компонентах React жизненный цикл контролируется через useEffect.ОпределениеMount — момент, когда компонент впервые добавляется в DOM.Unmount — момент, когда компонент удаляется из DOM.Отслеживание mountuseEffect(() => {
  console.log("component mounted");
}, []);
Почему это работаетПустой массив зависимостей означает запуск эффекта только после первого рендера.Эффект выполняется один раз (за исключением StrictMode в dev).Отслеживание unmountuseEffect(() => {
  return () => {
    console.log("component unmounted");
  };
}, []);
Что происходитReact вызывает cleanup-функцию.Компонент удаляется из DOM.Все связанные ресурсы должны быть очищены.Частые кейсы использованияЛогирование жизненного цикла.Подписки / отписки.Инициализация и очистка сторонних библиотек.ВыводuseEffect с пустым массивом зависимостей — стандартный и надёжный способ отследить mount и unmount компонента.