React suspense, not just for Alfred Hitchcock

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

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

19. React.useTransition() • Transition between application states in a more controlled manner 19© 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

React suspense, not just for Alfred Hitchcock

Maurice De Beijer [MVP]

React suspense, not just for Alfred Hitchcock