React — Lazy Loading

Basic Lazy Loading

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

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

Route-based Code Splitting

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
const Contact = React.lazy(() => import('./pages/Contact'));

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

Lazy Loading Examples

// Lazy load heavy component
const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Dashboard() {
    const [showChart, setShowChart] = useState(false);

    return (
        <div>
            <button onClick={() => setShowChart(true)}>
                Show Chart
            </button>

            {showChart && (
                <Suspense fallback={<div>Loading chart...</div>}>
                    <HeavyChart />
                </Suspense>
            )}
        </div>
    );
}

// Lazy load modals
const UserModal = React.lazy(() => import('./modals/UserModal'));
const SettingsModal = React.lazy(() => import('./modals/SettingsModal'));

function App() {
    const [modal, setModal] = useState(null);

    return (
        <div>
            <button onClick={() => setModal('user')}>User</button>
            <button onClick={() => setModal('settings')}>Settings</button>

            <Suspense fallback={<div>Loading modal...</div>}>
                {modal === 'user' && <UserModal onClose={() => setModal(null)} />}
                {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} />}
            </Suspense>
        </div>
    );
}

// Dynamic imports
function DynamicComponent({ componentName }) {
    const [Component, setComponent] = useState(null);

    useEffect(() => {
        const loadComponent = async () => {
            const module = await import(`./components/${componentName}`);
            setComponent(() => module.default);
        };

        loadComponent();
    }, [componentName]);

    if (!Component) return <div>Loading...</div>;

    return <Component />;
}

Benefits of Lazy Loading

1. Smaller initial bundle size
2. Faster initial page load
3. Better performance
4. Reduced memory usage
5. Improved user experience

Mini Practice

Write React code that:

1. Lazy loads a component
2. Implements route-based code splitting
3. Lazy loads modals
4. Uses dynamic imports

Up Next

Next: Learn about Server Components.