Create a React component that uses the Suspense component to display a fallback while loading a lazily loaded component. Which code snippet is correct?

Đáp án đúng: "import React, { lazy, Suspense } from 'react'; const MyComponent = lazy(() => import('./MyComponent')); function App() {

return ( <Suspense fallback={
  <div>Loading...</div>
}

> <MyComponent /> </Suspense> ); } export default App;". Hàm lazy nhận một hàm trả về Promise từ import() động, React chỉ tải chunk của MyComponent khi nó render lần đầu; trong lúc chờ, Suspense bao ngoài hiển thị phần tử truyền qua prop fallback, ở đây là dòng Loading..., tải xong mới thay bằng component thật. Phương án gán "const MyComponent = import('./MyComponent');" bỏ lazy, nên MyComponent là một Promise chứ không phải component, dùng làm thẻ JSX sẽ lỗi. Phương án viết "lazy('./MyComponent')" truyền chuỗi đường dẫn thay cho hàm gọi import(), lazy không tự tải được, đồng thời "<div fallback=" chỉ là thuộc tính vô nghĩa trên thẻ div, không có Suspense nên không có giao diện chờ. Phương án dùng "

<React.Suspense>
  <MyComponent />

" nạp lười đúng nhưng thiếu prop fallback, nên trong lúc tải không hiện gì, trái với yêu cầu hiển thị fallback.