Lazy loading

Lazy loading means delaying the loading of code or resources until they are needed. In React, React.lazy is commonly used to lazy-load components.

React.lazy

const Admin = React.lazy(
  () => import("./Admin")
);

Suspense fallback

<Suspense fallback={<PageLoader />}>
  <Admin />
</Suspense>

Complete route example

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

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route
          path="/reports"
          element={<Reports />}
        />
      </Routes>
    </Suspense>
  );
}

Loading output

Opening Reports:

Loading report module...

[spinner]

Reports
Revenue
Orders
Customers

Lazy data vs lazy code

Lazy loading a JavaScript module is different from fetching API data. Suspense for code loading and API loading state solve different concerns.

Common mistakes

• Using lazy loading without a useful fallback.
• Lazy loading critical above-the-fold code unnecessarily.
• Confusing lazy module loading with API data fetching.

Interview questions

• What does React.lazy do?
• Why is Suspense required?
• Lazy loading vs code splitting?