React.JS Lazy Loading

Load component only when needed

This improves:

• Faster website loading
• Better performance
• Smaller bundle size

1. Import lazy and Suspense

import { lazy, Suspense } from "react";

2. Normal Import

import Dashboard from "./Dashboard";

Loads immediately.

3. Lazy Import

const Dashboard = lazy(() => import("./Dashboard"));
import Dashboard from "./Dashboard";
const Dashboard = lazy(()=>import('./Dashboard'));

Now component loads only when opened.

4. Use Suspense:

<Suspense fallback={<h1>Loading...</h1>}>
  <Dashboard />
</Suspense>

Example:

import { lazy, Suspense } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

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

export default App;

Lazy Loading With React Router:

import { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";

const Login = lazy(() => import("./pages/Login"));
const Dashboard = lazy(() => import("./pages/Dashboard"));

function App() {
  return (
    <Suspense fallback={<h2>Loading...</h2>}>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

export default App;