Какие жизненные циклы есть у классовых компонентов и как они реализованы в функциональных

Что проверяют

Знаете ли вы фазы жизненного цикла и понимаете ли, что хуки не переводят методы один в один, а меняют модель: вместо «когда выполнить» вы описываете «с чем синхронизироваться». Следом спрашивают, как сделать то, у чего нет прямого аналога.

Как отвечать

У классового компонента три фазы и обработка ошибок:

• монтирование: constructor, static getDerivedStateFromProps, render, componentDidMount;
• обновление: getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate;
• размонтирование: componentWillUnmount;
• ошибки: static getDerivedStateFromError и componentDidCatch.

Соответствия в функциональном компоненте:

• constructor: начальное значение useState(() => init()) или useRef для того, что не должно вызывать рендер;
• componentDidMount: useEffect(fn, []). Эффект обычно идёт после отрисовки; замерить DOM до кадра поможет useLayoutEffect;
• componentDidUpdate: useEffect с зависимостями. Срабатывает и при монтировании, пропуск первого запуска делают через useRef;
• componentWillUnmount: функция очистки эффекта. Она вызывается и перед каждым повторным запуском, а не только при удалении;
• shouldComponentUpdate: React.memo для компонента, useMemo и useCallback для значений. React Compiler умеет расставлять мемоизацию сам;
• getDerivedStateFromProps: вычисление прямо в рендере или сброс состояния через key.

Прямого аналога нет у getSnapshotBeforeUpdate и у обработки ошибок: error boundary по-прежнему пишется классом или берётся из react-error-boundary.

Где спотыкаются

Не знают про StrictMode: в разработке React монтирует компонент, размонтирует и монтирует снова, эффект срабатывает дважды. Это проверка, что очистка написана правильно, а не баг.

Врут в массиве зависимостей, чтобы эффект «выполнился один раз», и получают устаревшие значения в замыкании. Для этого и есть правило react-hooks/exhaustive-deps.

Делают запрос в useEffect без отмены. При быстрой смене пропсов старый ответ приходит позже нового и затирает данные. Нужен AbortController или флаг в очистке, а лучше TanStack Query.