Как устроен жизненный цикл компонента в React

Жизненный цикл компонента в React состоит из трех основных фаз:

1. Монтирование (Mounting):

• constructor() - инициализация состояния
• render() - отрисовка компонента
• componentDidMount() - выполняется после первого рендера

2. Обновление (Updating):

• shouldComponentUpdate() - определяет нужно ли перерисовывать компонент
• render() - перерисовка компонента
• componentDidUpdate() - выполняется после обновления

3. Размонтирование (Unmounting):

• componentWillUnmount() - очистка перед удалением компонента

Пример с хуками (современный подход):

useEffect(() => {
  // componentDidMount
  return () => {
    // componentWillUnmount
  };
}, []);

useEffect(() => {
  // componentDidUpdate
});