React Performance Optimization: Code Splitting

Implement Code Splitting in a React App

Modify a React app with multiple routes to lazy load each route component using React.lazy and Suspense.

Expected output: The app loads faster initially and route components load on demand with a loading indicator.

Hint: Use React.lazy for dynamic imports and wrap routes with Suspense providing a fallback UI.

Code splitting is a technique to split your app's bundle into smaller chunks that load on demand. It improves performance by reducing initial load time and loading code only when needed.

React.lazy allows dynamic import of components, and Suspense lets you specify a fallback UI while the lazy component is loading, enabling smooth lazy loading.

Avoid code splitting for very small components or when it causes too many network requests, which can degrade performance.