Successfully reported this slideshow.
Your SlideShare is downloading. ×

Concurrent Rendering Adventures in React 18

Concurrent Rendering Adventures in React 18

Download to read offline

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.

https://reactadvanced.com/workshops-3h

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.

https://reactadvanced.com/workshops-3h

Advertisement
Advertisement

More Related Content

Advertisement

Related Books

Free with a 30 day trial from Scribd

See all

Concurrent Rendering Adventures in React 18

  1. 1. Concurrent Rendering Adventures in React 18
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2 ABL - The Problem Solver
  3. 3. The React Newsletter © ABL - The Problem Solver 3
  4. 4. Workshop goal  Learn about using <Suspense /> today  Lazy loading of data  Nest and/or parallelize <Suspense /> components as needed  Error handling while suspended with an <ErrorBoundary />  Learn about using concurrent mode tomorrow  Using createRoot() to render a React 18 application  The what and how of React concurrent mode  Orchestrating <Suspense /> boundaries using <SuspenseList />  Using startTransition() and/or useTransition() to defer work
  5. 5. Type it out by hand? “Typing it drills it into your brain much better than simply copying and pasting it.You're forming new neuron pathways.Those pathways are going to help you in the future. Help them out now!” © ABL - The Problem Solver 5
  6. 6. Prerequisites Install Node & NPM Install the GitHub repository © ABL - The Problem Solver 6
  7. 7. Install Node.js & NPM © ABL - The Problem Solver 7
  8. 8. Clone the GitHub Repository © ABL - The Problem Solver 8
  9. 9. Install NPM Packages © ABL - The Problem Solver 9
  10. 10. Following Along  Repository: https://github.com/mauricedb/concurrent-rendering-adventures-in-react-18  Slides: http://www.theproblemsolver.nl/workshop-concurrent-rendering-adventures-in-react-18.pdf © ABL - The Problem Solver 10
  11. 11. React 17 Photo by VisualTag Mx on Pexels
  12. 12. <Suspense />
  13. 13. <Suspense />  Allows React to “suspend” rendering a component subtree  Used when a (grand) child component is not ready to be rendered  ECMAScript bundle containing the component isn’t loaded yet  The data needed for a component to render isn’t available yet  The “fallback” component will be rendered instead  Replaces the complete children component tree  Rendering is suspended when a promise is thrown  And resumed when the promise resolves
  14. 14. SWR and Suspense  SWR is used in the application to load data  A convenient hook to fetch data  SWR makes it easy to start using suspense  Add suspense: true to the <SWRConfig />
  15. 15. index.tsx
  16. 16. UserList.tsx
  17. 17. AccountDetails.tsx
  18. 18. MovieDetails.tsx
  19. 19. The Result
  20. 20. <Suspense /> & Errors
  21. 21. <Suspense /> & Errors  If a suspense resource fails to load an error is thrown  When requesting it during the render()  Catch the error using an ErrorBoundary  Just like other runtime errors in React lifecycle functions  Error boundaries can be nested  Just like suspense boundaries
  22. 22. index.tsx
  23. 23. The Result
  24. 24. UserDetails.tsx
  25. 25. The Result
  26. 26. Nesting <Suspense />
  27. 27. Nesting <Suspense />  Multiple suspense components can be nested  React will use the closest parent <Suspense /> component  Very useful to control what part of the UI is replaced by a fallback  👉There is a behavior change in React 18 with null fallback 👈
  28. 28. App.tsx
  29. 29. The Result
  30. 30. MovieDetails.tsx
  31. 31. The Result
  32. 32. Parallel <Suspense />
  33. 33. Parallel <Suspense />  Multiple suspense boundaries can suspend in parallel  React will suspend them all and show multiple fallback components  If you want to render a component while others are still loading  Multiple suspending components in a single <Suspense/> is also fine  Will resume when all resource promises are resolved
  34. 34. MovieDetails.tsx
  35. 35. The Result
  36. 36. Break time Photo by Mindspace Studio on Unsplash
  37. 37. React 18 Photo by cottonbro on Pexels
  38. 38. React 18  React 18 is still in alpha/preview version right now  Daily publish to NPM using the @next and the @alpha tags  npm install react@next react-dom@next --force
  39. 39. package.json
  40. 40. index.tsx
  41. 41. New hooks
  42. 42. New hooks  useDeferredValue()  Returns a deferred version of the value that may lag behind  useTransition()  Avoid undesirable states when waiting for content  useMutableSource()  Enables React components to safely and efficiently read from a mutable external source in Concurrent Mode  Avoids tearing  useOpaqueIdentifier()  Can be used to generate unique ID’s in an SSR-safe way
  43. 43. useOpaqueIdentifier()
  44. 44. useOpaqueIdentifier()  Can be used to generate unique ID’s in a SSR-safe way  👉 Still prefixed with unstable_ 👈  👉Will be renamed to useId() in React 18! 👈
  45. 45. LabelInput.tsx
  46. 46. The Result
  47. 47. Using <SuspenseList /> Orchestrating <Suspense /> boundaries
  48. 48. Using <SuspenseList />  <SuspenseList /> will let you control how multiple <Suspense /> components render their fallback  The order in which child components show when ready  If multiple child fallbacks components are displayed
  49. 49. UserDetails.tsx
  50. 50. The Result
  51. 51. Concurrent Mode
  52. 52. React 17 rendering components
  53. 53. User click event
  54. 54. Event running
  55. 55. React 18 Concurrent mode
  56. 56. Event running with concurrent mode
  57. 57. Using startTransition() To defer lower priority work
  58. 58. Using startTransition()  Code in a startTransition() callback is considered low priority  Can be interrupted by more urgent updates  Like user events
  59. 59. PrimeNumbers.tsx
  60. 60. The Result
  61. 61. Using useTransition() To defer lower priority work and know about pending updates
  62. 62. Using useTransition()  The useTransition() hook can be used to control how React renders when components suspend  Prevent the fallback component being rendered immediately  The new components will be rendered when:  Their resources are ready  The timeout is expired  The “old” UI can use the isPending state when rendering
  63. 63. PrimeNumbers.tsx
  64. 64. The Result
  65. 65. startTransition() vs useTransition() startTransition()  Can be used anywhere  No additional renders useTransition()  Needs to be used in a functional component  One additional render with isPending
  66. 66. UI state transitions with useTransition() More control over how UI state updates are done
  67. 67. UserList.tsx (1/2)
  68. 68. UserList.tsx (2/2)
  69. 69. UserDetails.tsx
  70. 70. The Result
  71. 71. Conclusion  You can use <Suspense /> today  Suspend when lazily loading components and/or fetching data  Handle error with an <ErrorBoundary />  Nest and/or parallelize as needed  Concurrent mode  Coming soon to a React application near you  Can make large applications more responsive  Render a React 18 application using createRoot()  Use <SuspenseList /> to orchestrate <Suspense /> components  Defer work with startTransition() and/or useTransition()
  72. 72. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 72

Editor's Notes

  • Time: 5:00
  • Foto door Visual Tag Mx via Pexels
  • Time: 8:00
  • Time: 5:00
  • Time: 5:00
  • Time: 5:00
  • Photo by Mindspace Studio on Unsplash
  • Foto door cottonbro via Pexels
  • Time: 5:00
  • Time: 5:00
  • Time: 5:00
  • Time: 5:00
  • Time: 5:00
  • Time: 5:00

×