React Lazy Loading

Lazy load components to reduce initial bundle size.

Basic Lazy Loading

```javascript import { lazy, Suspense } from 'react';

const Heavy Component = lazy(() => import('./HeavyComponent'));

function App() { return ( <Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> ); } ```

With Router

```javascript const Home = lazy(() => import('./Home')); const About = lazy(() => import('./About'));

function App() { return ( <BrowserRouter> <Suspense fallback={<div>Loading page...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Suspense> </BrowserRouter> ); } ```

Multiple Components

```javascript const Dashboard = lazy(() => import('./Dashboard')); const Settings = lazy(() => import('./Settings')); const Profile = lazy(() => import('./Profile')); ```

Remember

- Wrap with Suspense - Use for large components - Improve initial load time - Show loading fallback

> Next: Learn component patterns!