The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.

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