Q23: How does React.lazy and Suspense enable route-based code splitting?
React.lazy() allows rendering dynamic imports as standard components. Suspense wraps dynamic components and displays a fallback UI (like a loader spinner) while bundle JS chunks download asynchronously over the network.
Route-Based Code Splitting
import React, { Lazy, Suspense } from 'react';
// Dynamic JS import bundle chunk
const AdminDashboard = React.lazy(() => import('./AdminDashboard'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<AdminDashboard />
</Suspense>
);
}💡 AdminDashboard bundle chunk downloads only when route renders, displaying Spinner in the interim.
Key Takeaways
- Splits large JavaScript bundles into smaller route chunks.
Suspensehandles pending promise states cleanly using fallback props.
Knowledge Check
What happens if a React.lazy component fails to load due to a network bundle error?