Почему Error Boundary реализуется на классовом компоненте в React и какого метода жизненного цикла нет в функциональном компоненте?

Что проверяют

Знаете ли вы границы механизма и почему у него нет аналога на хуках. Формально спрашивают про метод жизненного цикла, а на деле проверяют, что именно ловит граница, а что проходит мимо неё. Следом спрашивают, что делать с ошибкой в обработчике клика или в промисе.

Как отвечать

Скажите прямо: хука с семантикой static getDerivedStateFromError и componentDidCatch в React нет, поэтому граница ошибок пишется классом. Это не наследие старого API, а действующее ограничение и в React 19: у функционального компонента нет фазы, где он мог бы перехватить исключение из рендера поддерева.

• static getDerivedStateFromError(error): вызывается в фазе рендера и возвращает новое состояние, за счёт него показывается запасной интерфейс. Побочные эффекты запрещены;
• componentDidCatch(error, info): вызывается в фазе коммита, сюда идёт логирование, в info.componentStack лежит цепочка компонентов до места падения;
• что граница не ловит: ошибки в обработчиках событий, в асинхронном коде и таймерах, в серверном рендере и в самой границе. Для них нужны try/catch, .catch() у промиса, слушатели error и unhandledrejection.

Свой класс писать не обязательно: react-error-boundary даёт компонент с FallbackComponent и onReset, а хук useErrorBoundary из того же пакета бросает асинхронную ошибку в ближайшую границу вручную. В Next.js App Router роль границы играют файл error.tsx (обязательно клиентский) и global-error.tsx для падений в корневом макете.

Хороший финал: в React 19 у createRoot и hydrateRoot появились параметры onCaughtError, onUncaughtError и onRecoverableError. Через них ошибки уходят в мониторинг централизованно.

Где спотыкаются

Называют только componentDidCatch и забывают про getDerivedStateFromError. Именно он переключает интерфейс на запасной, без него пользователь увидит пустой экран.

Ставят одну границу на всё приложение. Любая ошибка гасит весь интерфейс, хотя достаточно погасить один виджет. Границы ставят вокруг независимых кусков.

Ждут, что граница поймает ошибку из onClick или из запроса. Не поймает, и в бою это выглядит так: приложение молча ничего не сделало, в логах пусто.