CodeBlanks Logo Icon CodeBlanks
Login Register

Suspense boundary

Learn to show a fallback during load with Suspense.

Suspense boundary

Suspense is a component that shows a fallback while its children load. The fallback prop takes a loading indicator: a spinner, text or a skeleton.

You wrap Suspense around the lazy component. Once loaded, the fallback is removed and the real component renders. This transition is automatic.

A good fallback should match the size of the real content; this avoids layout jump when loaded. This is called a 'skeleton'.

Skeleton fallback

A skeleton fallback is a placeholder frame of the real content. Its size and shape match the real content; this avoids layout jump when loading completes.

Example: a card skeleton has gray boxes representing text and image areas. When the real content loads, boxes are replaced with content.

This improves user experience; instead of a blank screen, it shows a structural loading indicator.

Practice Skeleton fallback

Complete the skeleton below. Write an App component; return <Suspense fallback={"{"<Skeleton />}"}><Card /></Suspense>. Export it.

Starter code

App.jsx
import { Suspense } from "react";

// Write the App component here

Sample solution

App.jsx
import { Suspense } from "react";

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <Card />
    </Suspense>
  );
}

export default App;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 When does the Suspense fallback render?

  • Her zaman
  • During an error
  • While loading Correct answer
  • When rendering finishes

Explanation: The fallback renders during loading and is removed when done.

2 fallback prop

Question 
<Suspense ____={<Spinner />}><Heavy /></Suspense>
Answer 
<Suspense fallback={<Spinner />}><Heavy /></Suspense>

Explanation: The fallback prop takes the loading content.

3 Suspense boundary: match the terms

Term Meaning
Suspense Loading boundary
fallback Fallback content
skeleton Placeholder frame
Spinner Spinning loader

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart