Summary - Suspense and lazy
- React course
- Intermediate
- Lesson 60/80
- 5 min
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.
Practice Summary lazy
Complete the skeleton below. Define Heavy with lazy; write an App that returns <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Export it.
Starter code
import { lazy, Suspense } from "react";
// Write Heavy and App hereSample solution
import { lazy, Suspense } from "react";
const Heavy = lazy(() => import("./Heavy"));
function App() {
return (
<Suspense fallback={<Spinner />}>
<Heavy />
</Suspense>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which provides code splitting?
- useRef
- useEffect
- React.lazy Correct answer
- useState
Explanation: React.lazy provides code splitting.
2 Summary match
| Term | Meaning |
|---|---|
React.lazy |
Code splitting |
Suspense |
Loading boundary |
fallback |
Fallback content |
multiple boundaries |
Progressive loading |