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

componentDidCatch и getDerivedStateFromError — оба метода для обработки ошибок в React, но работают по-разному:

1. getDerivedStateFromError — статический метод, вызывается при ошибке в дочерних компонентах. Он должен вернуть объект для обновления состояния, чтобы показать fallback UI. Работает на этапе рендеринга, поэтому не должен содержать сайд-эффектов.

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

2. componentDidCatch — вызывается после ошибки, работает на этапе коммита. Позволяет выполнять сайд-эффекты (логирование ошибок и т.д.). Не влияет на состояние напрямую.

componentDidCatch(error, errorInfo) {
  logErrorToService(error, errorInfo);
}

Используются вместе в Error Boundary:

• getDerivedStateFromError для отображения запасного UI
• componentDidCatch для логирования и других действий