Что такое componentDidMount, componentDidUpdate, componentWillUnmount, componentDidCatch?

Методы жизненного цикла классовых компонентов React

В классовых компонентах React существуют специальные методы, которые автоматически вызываются на разных этапах жизни компонента: монтирование, обновление, размонтирование и обработка ошибок. Эти методы позволяют разработчику выполнять побочные эффекты, такие как запросы к серверу, подписки или очистку ресурсов.

componentDidMount

Вызывается сразу после того, как компонент был вставлен в DOM. Это идеальное место для выполнения запросов к API, установки подписок или инициализации сторонних библиотек.

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }
  render() { return {this.state?.data}; }
}

componentDidUpdate

Вызывается после каждого обновления компонента (изменения пропсов или состояния). Позволяет реагировать на изменения, например, обновлять данные при смене ID.

componentDidUpdate(prevProps) {
  if (this.props.userId !== prevProps.userId) {
    this.fetchUser(this.props.userId);
  }
}

componentWillUnmount

Вызывается перед удалением компонента из DOM. Используется для отмены подписок, очистки таймеров или удаления обработчиков событий, чтобы избежать утечек памяти.

componentWillUnmount() {
  clearInterval(this.timer);
  this.subscription.unsubscribe();
}

componentDidCatch

Ловит ошибки, возникшие в дочерних компонентах (в методах render, lifecycle или конструкторах). Позволяет отобразить запасной UI и залогировать ошибку.

componentDidCatch(error, info) {
  console.error('Error caught:', error, info);
  this.setState({ hasError: true });
}
render() {
  if (this.state.hasError) return <h1>Something went wrong.</h1>;
  return this.props.children;
}

Вывод: Эти методы необходимы для управления побочными эффектами и ресурсами в классовых компонентах. С появлением хуков в функциональных компонентах их заменили useEffect и Error Boundary, но понимание lifecycle методов важно для работы с легаси-кодом и глубокого понимания React.