The document discusses the React Suspense feature, which allows for rendering suspension when child components are not ready, utilizing fallback components. It covers related concepts such as lazy loading components, data fetching, and the use of hooks like useTransition. Additionally, it highlights the functionalities of Strict Mode and SuspenseList for managing concurrent rendering and controlling loading indicators.

1. React Suspense, not just
for Alfred Hitchcock
Maurice de Beijer
@mauricedb

2. Maurice de Beijer
• The Problem Solver
• Microsoft MVP
• Freelance developer/instructor
• @mauricedb
• http://www.TheProblemSolver.nl
• maurice.de.beijer@gmail.com
2© ABL - The Problem Solver

3. Agenda
Available Now
• Suspense component
• Lazy loading components
• Data fetching
• Strict mode
Available in the Future
• Concurrent Rendering
• Transitions using useTransition()
• Orchestrating suspense with
<SuspenseList />
3© ABL - The Problem Solver

4. <Suspense />
4© ABL - The Problem Solver

5. <Suspense />
• Suspend rendering when one or more of
the child components is not ready
• Display a fallback component instead
5© ABL - The Problem Solver

6. React.lazy()
6© ABL - The Problem Solver

7. React.lazy()
• Dynamic import React component
• Suspends rendering the closest
<Suspense> component
• Automatic code splitting
• Not available for server-side rendering at
the moment
7© ABL - The Problem Solver

8. Data Fetching
8© ABL - The Problem Solver

9. Resource Manager
• Load asynchronous data
• Suspends rendering the closest
<Suspense> component
• Note: Throw a promise to suspend!
• See this gist from Ryan Florence
9© ABL - The Problem Solver

10. AJAX Resource
© ABL - The Problem Solver 10

11. AJAX Resource
• A resource using fetch() to load some
data
11© ABL - The Problem Solver

12. Fetching the resource
• Fetching asynchronous data
• Suspends rendering the closest
<Suspense> component if not ready
• Use an <ErrorBoundary> to handle
errors
12© ABL - The Problem Solver

13. <StrictMode />
13© ABL - The Problem Solver

14. <StrictMode />
• Find potential problems with concurrent
rendering without actually doing so
• Warns about:
• Unsafe lifecycle methods
• Deprecated findDOMNode() usage
• legacy string ref API usage
• Legacy context API
• Tries to detect unexpected side effects
• Note: development mode only, no
runtime overhead
14© ABL - The Problem Solver

15. 15© ABL - The Problem Solver

16. Concurrent Rendering
16© ABL - The Problem Solver

17. Concurrent Rendering
• Changes how React renders your
components
• The render phase is split into chunks and
can be interrupted/aborted and restarted
• The commit phase is still atomic
• No partial screen updates
• Note: Blocking Mode is a migration step
17© ABL - The Problem Solver

18. React.useTransition()
18© ABL - The Problem Solver

19. React.useTransition()
• Transition between application states in a
more controlled manner
19© ABL - The Problem Solver

20. <SuspenseList />
20© ABL - The Problem Solver

21. <SuspenseList />
• Control how multiple <Suspense>
boundaries are rendered
• For example:
• Prevents multiple loading indicators at the
same time
21© ABL - The Problem Solver

22. 22© ABL - The Problem Solver