Suspense trong React. Fallback, error boundary, data fetching?

Suspense là cơ chế cho phép React tạm dừng render một component và hiển thị fallback UI (ví dụ loading spinner) cho đến khi component đó sẵn sàng. Hiện tại Suspense hoạt động tốt nhất với React.lazy() cho lazy loading component và với các framework như Next.js, Remix cho data fetching phía server.

Khi kết hợp với Error Boundary, Suspense xử lý trạng thái loading còn Error Boundary xử lý trạng thái lỗi, tạo nên trải nghiệm hoàn chỉnh cho người dùng.

Trong React 19 (stable từ tháng 12/2024) đã hỗ trợ Suspense cho data fetching phía client thông qua use() hook, cho phép đọc Promise trực tiếp trong component mà không cần thư viện bổ sung.