How do Suspense and React.lazy work?

React.lazy enables you to dynamically import components only when they are needed,

enabling code splitting and lazy loading.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {

return (

<React.Suspense fallback={<div>Loading...</div>}>

<LazyComponent />

</React.Suspense>

);

}

Suspense is a wrapper around lazy-loaded components that shows a loading fallback

while the component is being loaded.