React: How do Suspense and React.lazy work?

Suspense and React.lazy are tools for lazy loading components when they are actually needed.

Simple analogy: Imagine you are reading a book (website).

• Without lazy loading — you buy the entire encyclopedia right away (load all the code). Even the sections you won't read.
• With lazy loading — you buy the book by chapters. First you read "Introduction" (small piece loads). When you get to "Chapter 5" — it loads automatically.

React.lazy — "Load when needed":

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

The AdminPanel component will load only when it needs to be shown.

Suspense — show placeholder while loading:

1import { Suspense } from 'react';
2
3function App() {
4    return (
5        <Suspense fallback={<Spinner />}>
6            <AdminPanel />
7        </Suspense>
8    );
9}

While the component is loading — Suspense shows fallback (Spinner).

Error handling with Suspense:

1import { Suspense, lazy } from "react";
2import { ErrorBoundary } from "react-error-boundary";
3
4const LazyComponent = lazy(() => import("./LazyComponent"));
5
6function App() {
7  return (
8    <ErrorBoundary fallback={<p>Something went wrong</p>}>
9      <Suspense fallback={<Spinner />}>
10        <LazyComponent />
11      </Suspense>
12    </ErrorBoundary>
13  );
14}

Performance considerations:

• Lazy loading reduces the initial bundle size — the browser downloads less JavaScript on first load.
• Use it for routes or features the user may never visit (admin panels, settings, heavy charts).
• Combine with route-based splitting for maximum impact.

What else Suspense can do (React 18+):

• Streaming SSR — server sends HTML in parts without waiting for all data to load.
• Data loading — can use Suspense with libraries (Relay, SWR) to show "skeleton" while data loads.
• Nested Suspense — multiple Suspense boundaries at different levels allow progressive loading of UI sections.