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

В React, для отслеживания размонтирования (unmounting) функционального компонента, вы можете использовать хук useEffect с функцией очистки (cleanup function). Функция очистки выполнится при размонтировании компонента.

Пример:

import React, { useEffect } from 'react';

function MyComponent() {
  // Логика компонента

  useEffect(() => {
    // Этот код выполнится при монтировании компонента

    // Функция очистки (выполнится при размонтировании компонента)
    return () => {
      console.log("Component is unmounted");
      // Дополнительные действия при размонтировании
    };
  }, []); // Пустой массив зависимостей указывает, что эффект должен выполниться только при монтировании и размонтировании

  // Остальной код компонента
  return (
    <div>
      {/* Контент компонента */}
    </div>
  );
}

export default MyComponent;

В приведенном выше коде, функция useEffect с пустым массивом зависимостей ([]) означает, что этот эффект (и его функция очистки) будет выполняться только один раз при монтировании компонента и один раз при размонтировании. Если не указать массив зависимостей, useEffect будет выполняться при каждом рендере компонента.

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