В чем разница между componentDidCatch и getDerivedStateFromError?

`componentDidCatch` и `getDerivedStateFromError` — методы Error Boundary в React: оба ловят ошибки рендера дочерних компонентов, но `getDerivedStateFromError` обновляет состояние для fallback UI, а `componentDidCatch` — для побочных эффектов (логирования).

getDerivedStateFromError

Статический метод; вызывается при ошибке в рендере потомка. Возвращает новое состояние для отображения fallback UI. Должен быть чистым (без побочных эффектов):

static getDerivedStateFromError(error) {
  return { hasError: true }; // переключить на fallback
}

Выполняется на фазе рендера.

componentDidCatch

Метод экземпляра; вызывается после ошибки. Для побочных эффектов: логирование, отправка в сервис мониторинга. Получает ошибку и info (стек компонентов):

componentDidCatch(error, errorInfo) {
  logToService(error, errorInfo); // побочный эффект
}

Выполняется на фазе commit.

Совместное использование

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };      // рендерим fallback
  }
  componentDidCatch(error, info) {
    logError(error, info);          // логируем
  }
  render() {
    return this.state.hasError ? <Fallback /> : this.props.children;
  }
}

Ограничения

Оба ловят ошибки рендера дочерних, но не ловят: ошибки в обработчиках событий, асинхронный код, ошибки самого boundary, SSR.

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

Оба — методы Error Boundary. getDerivedStateFromError — статический, чистый, обновляет state для fallback UI (фаза рендера). componentDidCatch — для побочных эффектов (логирование, фаза commit). Вместе: первый показывает fallback, второй логирует. Не ловят ошибки обработчиков и асинхронного кода.