Question 1

Error Boundary trong React là gì?

Accepted Answer

Error Boundary là một class component trong React giúp bắt các lỗi JavaScript xảy ra trong cây component con của nó, hiển thị giao diện dự phòng (fallback UI) và ngăn toàn bộ ứng dụng bị crash. Nó sử dụng các phương thức componentDidCatch() và getDerivedStateFromError() để chặn và xử lý lỗi rendering.

Question 2

Tại sao sử dụng Error Boundaries thay vì try/catch truyền thống trong React?

Accepted Answer

Các khối try/catch không thể bắt lỗi xảy ra trong quá trình render component React, vì các lỗi này lan truyền lên cây component một cách bất đồng bộ. Error Boundaries được thiết kế đặc biệt để chặn lỗi rendering, lỗi lifecycle và lỗi constructor trong các component con, trong khi try/catch chỉ hoạt động với mã lệnh đồng bộ.

Question 3

Phương thức lifecycle nào cho phép bắt lỗi trong Error Boundary?

Accepted Answer

componentDidCatch(error, info) là phương thức lifecycle được gọi sau khi Error Boundary bắt được lỗi. Nó nhận error và đối tượng info chứa componentStack, cho phép ghi log lỗi hoặc thực hiện các hành động side-effect. Lưu ý rằng getDerivedStateFromError() cũng được sử dụng nhưng để cập nhật state và hiển thị fallback UI.

Error Boundaries & Error Handling

Error Boundary trong React là gì?

Câu trả lời

Tại sao sử dụng Error Boundaries thay vì try/catch truyền thống trong React?

Câu trả lời

Phương thức lifecycle nào cho phép bắt lỗi trong Error Boundary?

Câu trả lời

Vai trò của getDerivedStateFromError() trong Error Boundary là gì?

Sự khác biệt giữa getDerivedStateFromError() và componentDidCatch() là gì?

Các chủ đề phỏng vấn React / Next.js khác

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Biểu mẫu và Controlled Components

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Data Fetching trong Next.js

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Kiểm thử React

Zustand State Management

Tối ưu hiệu năng React

Advanced React Patterns

Tính năng nâng cao của Next.js

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo