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

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

Короткий ответ

Что ответить на собеседовании

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

Подробный разбор

Ответ с пояснениями

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

Пример:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // код, выполняющийся при монтировании

    return () => {
      // код очистки, выполняющийся при размонтировании
      console.log('Компонент размонтирован');
    };
  }, []); // пустой массив зависимостей гарантирует вызов только при монтировании и размонтировании

  return <div>Пример</div>;
}

Таким образом, если передать в useEffect пустой массив зависимостей, функция внутри return будет вызвана при размонтировании компонента, что соответствует поведению componentWillUnmount.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее