PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Где нужно использовать классы в React?

Основы React

Сегодня классы в React нужны в одном обязательном случае и в паре ситуационных.

Обязательный случай: Error Boundary

Перехват ошибок рендера дочернего дерева возможен только методами класса — хук-аналогов нет:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    errorReporting.capture(error, info);
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

На практике чаще берут библиотеку react-error-boundary — внутри неё ровно такой класс, наружу — удобный API с fallback и reset. То есть даже здесь класс своими руками пишут редко.

Ситуационные случаи

  • Легаси-кодовые базы — поддержка и постепенный рефакторинг существующих классовых компонентов; уметь их читать обязательно.
  • getSnapshotBeforeUpdate — снять данные из DOM (позиция скролла) между рендером и коммитом; точного функционального аналога нет. Экзотика вроде чатов с «прилипанием» скролла.
  • Интеграция с очень старыми библиотеками, ожидающими классовые API.

Где классы НЕ нужны

Во всём остальном: состояние, эффекты, контекст, рефы, оптимизации — всё покрыто хуками, и новые фичи React (конкурентность, серверные компоненты, компилятор) рассчитаны на функции.

Коротко для собеседования

Классы обязательны только для Error Boundaries (componentDidCatch/getDerivedStateFromError — без хук-аналогов; на практике — react-error-boundary) и изредка для getSnapshotBeforeUpdate. Плюс поддержка легаси. Весь новый код — функциональные компоненты с хуками.

Другие вопросы раздела