React: What is React.lazy() and Suspense?

React.lazy() is a function for lazy loading components (code splitting). Component loads ONLY when needed, not immediately.

Analogy: Imagine a store. Instead of loading ALL the food into the car in advance, you load only what is needed for today's dinner. The rest — as needed.

1import { lazy, Suspense } from "react";
2
3// Loads ONLY on first render
4const AdminPanel = lazy(() => import("./AdminPanel"));
5
6function App() {
7  return (
8    <Suspense fallback={<div>Loading...</div>}>
9      <AdminPanel />  {/* Will load on mount */}
10    </Suspense>
11  );
12}

Suspense — wrapper component that shows fallback while lazy component is loading.

Advantages:

• Reduces initial bundle size.
• Speeds up page load.
• User sees content earlier.

Error Boundary + Suspense:

1<ErrorBoundary fallback={<p>Loading error</p>}>
2  <Suspense fallback={<Spinner />}>
3    <LazyComponent />
4  </Suspense>
5</ErrorBoundary>