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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Сбер

Стек: React

> Пример ответа

В классовых компонентах React жизненный цикл делится на три фазы: монтирование, обновление и размонтирование. Основные методы: componentDidMount, componentDidUpdate, componentWillUnmount. В функциональных компонентах эти этапы реализуются через хук useEffect, который объединяет их в одном месте.

Монтирование (аналог componentDidMount): useEffect(() => { ... }, []) - выполняется один раз после первого рендера.
Обновление (аналог componentDidUpdate): useEffect(() => { ... }, [deps]) - выполняется при изменении зависимостей в массиве deps.
Размонтирование (аналог componentWillUnmount): возврат функции очистки внутри useEffect: useEffect(() => { return () => { ... }; }, []).

Также есть редкие методы, такие как shouldComponentUpdate (оптимизация) - в функциональных компонентах заменяется React.memo или useMemo/useCallback. Метод getDerivedStateFromProps заменяется прямым вычислением состояния в рендере или через useMemo.