Summary - Suspense and lazy

Lazily load a heavy modal with React.lazy and wrap it in Suspense.

Summary - Suspense and lazy

In this group you learned code splitting with React.lazy, loading boundaries with Suspense, and multiple boundaries. lazy loads components on demand; Suspense shows a fallback during loading.

Multiple boundaries let each section load separately; the user sees content progressively. In the last step you combine all three tools.

Exercise Summary lazy

Complete the skeleton below. Define Heavy with lazy; write an App that returns <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Export it.

Show example solution

import { lazy, Suspense } from "react";

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Heavy />
    </Suspense>
  );
}

export default App;

Test yourself

Which provides code splitting?
- useRef
- useEffect
- React.lazy
- useState
Show answer

React.lazy — React.lazy provides code splitting.
Summary match

React.lazy

Code splitting
Suspense

Loading boundary
fallback

Fallback content
multiple boundaries

Progressive loading

Next lesson: What is a portal?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies