Question 1

Що таке Error Boundary в React?

Accepted Answer

Error Boundary — це класовий компонент React, який перехоплює помилки JavaScript, що виникають у дереві дочірніх компонентів, відображає резервний UI (fallback) і запобігає повному збою додатку. Він використовує методи componentDidCatch() та getDerivedStateFromError() для перехоплення та обробки помилок рендерингу.

Question 2

Чому варто використовувати Error Boundaries замість класичного try/catch у React?

Accepted Answer

Блоки try/catch не можуть перехопити помилки, що виникають під час рендерингу компонентів React, оскільки ці помилки поширюються вгору по дереву асинхронно. Error Boundaries спеціально розроблені для перехоплення помилок рендерингу, lifecycle та конструкторів у дочірніх компонентах, тоді як try/catch працює лише для синхронного імперативного коду.

Question 3

Який метод життєвого циклу дозволяє перехопити помилку в Error Boundary?

Accepted Answer

componentDidCatch(error, info) — це метод життєвого циклу, який викликається після того, як Error Boundary перехопив помилку. Він отримує помилку та об'єкт info, що містить componentStack, дозволяючи логувати помилки або виконувати дії side-effect. Зверніть увагу, що getDerivedStateFromError() також використовується, але для оновлення state та відображення fallback UI.

Error Boundaries & обробка помилок

Що таке Error Boundary в React?

Відповідь

Чому варто використовувати Error Boundaries замість класичного try/catch у React?

Відповідь

Який метод життєвого циклу дозволяє перехопити помилку в Error Boundary?

Відповідь

Яка роль getDerivedStateFromError() в Error Boundary?

Яка різниця між getDerivedStateFromError() та componentDidCatch()?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

TypeScript з React

Data Fetching у Next.js

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Тестування React

Zustand State Management

Оптимізація продуктивності React

Advanced React Patterns

Розширені можливості Next.js

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди