O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React suspense, not just for Alfred Hitchcock

128 visualizações

Publicada em

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.

Publicada em: Turismo
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

React suspense, not just for Alfred Hitchcock

  1. 1. React Suspense, not just for Alfred Hitchcock Maurice de Beijer @mauricedb
  2. 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. 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. 4. <Suspense /> 4© ABL - The Problem Solver
  5. 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. 6. React.lazy() 6© ABL - The Problem Solver
  7. 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. 8. Data Fetching 8© ABL - The Problem Solver
  9. 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. 10. AJAX Resource © ABL - The Problem Solver 10
  11. 11. AJAX Resource • A resource using fetch() to load some data 11© ABL - The Problem Solver
  12. 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. 13. <StrictMode /> 13© ABL - The Problem Solver
  14. 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. 15© ABL - The Problem Solver
  16. 16. Concurrent Rendering 16© ABL - The Problem Solver
  17. 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. 18. React.useTransition() 18© ABL - The Problem Solver
  19. 19. React.useTransition() • Transition between application states in a more controlled manner 19© ABL - The Problem Solver
  20. 20. <SuspenseList /> 20© ABL - The Problem Solver
  21. 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. 22© ABL - The Problem Solver

×