By default, React loads all components at once when app starts. Lazy loading means — load a component only when user actually needs it.
What happens without lazy loading:
User opens your app
React downloads ALL components — Home, Dashboard, Settings, Profile — everything at once
Initial load is slow — user is waiting unnecessarily
What happens with lazy loading:
User opens your app
React downloads only Home page
User clicks Dashboard — now Dashboard loads
User clicks Settings — now Settings loads
Each component loads only when needed
How to implement:
const Dashboard = React.lazy(() => import('./Dashboard'))
<Suspense fallback={<div>Loading...</div>}>
<Dashboard />
</Suspense>
Code splitting breaks app into smaller chunks. Browser loads only what's needed