Concurrent Rendering Adventures in React 18
Download as PPTX, PDF1 like283 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document outlines a workshop focused on concurrent rendering techniques in React 18, including the use of <suspense />, <errorboundary />, and new hooks like useTransition(). It discusses prerequisites and installation steps, as well as the benefits of using concurrent mode to enhance application responsiveness. Key concepts include lazy loading, error handling, and managing component rendering through <suspenselist />.
Concurrent Rendering Adventures in React 18
- 1. Concurrent Rendering Adventures in React 18
- 2. ï Maurice de Beijer ï The Problem Solver ï Microsoft MVP ï Freelance developer/instructor ï Twitter: @mauricedb ï Web: http://www.TheProblemSolver.nl ï E-mail: [email protected] 2 ABL - The Problem Solver
- 3. The React Newsletter © ABL - The Problem Solver 3
- 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. 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. Prerequisites Install Node & NPM Install the GitHub repository © ABL - The Problem Solver 6
- 7. Install Node.js & NPM © ABL - The Problem Solver 7
- 8. Clone the GitHub Repository © ABL - The Problem Solver 8
- 9. Install NPM Packages © ABL - The Problem Solver 9
- 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. React 17 Photo by VisualTag Mx on Pexels
- 12. <Suspense />
- 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. 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. index.tsx
- 16. UserList.tsx
- 18. MovieDetails.tsx
- 19. The Result
- 20. <Suspense /> & Errors
- 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. index.tsx
- 23. The Result
- 24. UserDetails.tsx
- 25. The Result
- 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. App.tsx
- 29. The Result
- 30. MovieDetails.tsx
- 31. The Result
- 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. MovieDetails.tsx
- 35. The Result
- 36. Break time Photo by Mindspace Studio on Unsplash
- 37. React 18 Photo by cottonbro on Pexels
- 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. package.json
- 40. index.tsx
- 41. New hooks
- 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
- 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. LabelInput.tsx
- 46. The Result
- 47. Using <SuspenseList /> Orchestrating <Suspense /> boundaries
- 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. UserDetails.tsx
- 50. The Result
- 51. Concurrent Mode
- 53. User click event
- 54. Event running
- 57. Using startTransition() To defer lower priority work
- 58. Using startTransition() ï Code in a startTransition() callback is considered low priority ï Can be interrupted by more urgent updates ï Like user events
- 59. PrimeNumbers.tsx
- 60. The Result
- 61. Using useTransition() To defer lower priority work and know about pending updates
- 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. PrimeNumbers.tsx
- 64. The Result
- 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. UI state transitions with useTransition() More control over how UI state updates are done
- 69. UserDetails.tsx
- 70. The Result
- 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. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 72