`React.lazy` và ` ` hoạt động thế nào?

React.lazy(() => import('./X')) khai báo một component nạp động : bundler tách nó thành chunk riêng, chỉ tải khi component thực sự render → code splitting . bọc component lazy (hoặc component đọc dữ liệu qua data lib hỗ trợ Suspense) và hiển thị fallback trong lúc chờ. Fallback hiện khi bất kỳ con nào đang suspend ; nhiều lazy trong cùng một Suspense chia sẻ chung một fallback. Dùng phổ biến: split theo route, tab nặng, modal mở theo tương tác. Nên kết hợp error boundary để bắt lỗi khi tải chunk thất bại (mạng lỗi).

`React.lazy` và `<Suspense>` hoạt động thế nào?

React.lazy(() => import('./X')) khai báo một component nạp động: bundler tách nó thành chunk riêng, chỉ tải khi component thực sự render → code splitting.
<Suspense fallback={...}> bọc component lazy (hoặc component đọc dữ liệu qua data lib hỗ trợ Suspense) và hiển thị fallback trong lúc chờ.
Fallback hiện khi bất kỳ con nào đang suspend; nhiều lazy trong cùng một Suspense chia sẻ chung một fallback.
Dùng phổ biến: split theo route, tab nặng, modal mở theo tương tác.
Nên kết hợp error boundary để bắt lỗi khi tải chunk thất bại (mạng lỗi).

Xem toàn bộ Frontend Essentials cùng filter theo level & chủ đề con.

Mở danh sách Frontend Essentials