Getting started with React Suspense and concurrent rendering
Download as pptx, pdf0 likes178 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1733403303)
React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.
More Related Content
What's hot (20)
Similar to Getting started with React Suspense and concurrent rendering (20)
More from Maurice De Beijer [MVP] (20)
Recently uploaded (20)
Getting started with React Suspense and concurrent rendering
- 1. Getting started with Suspense &Concurrent Rendering Maurice de Beijer - @mauricedb
- 2. Maurice de Beijer The Problem Solver Microsoft MVP Freelance developer/instructor Twitter: @mauricedb Web: http://www.TheProblemSolver.nl E-mail: [email protected] 2ABL - The Problem Solver
- 3. The React Newsletter © ABL - The Problem Solver 3
- 4. Workshop goal Use <Suspense /> Bundle splitting and lazy loading Data resources UI approaches Fetch from render Fetching before render Concurrent mode Enabling Concurrent mode Orchestrating <Suspense /> boundaries using <SuspenseList /> Using useTransition() to prioritize 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: http://bit.ly/suspense-2020 Slides: http://bit.ly/suspense-2020-pdf © ABL - The Problem Solver 10
- 12. Bundle Splitting & Lazy Loading By default CRA puts all application code in a single code bundle All code is loaded when the application first starts Many components may not be rendered until much later Or maybe never at all Splitting the code into multiple bundles makes the startup faster Only load additional parts when they are actually needed Using a bundle per route is a good start 👉 Beware that shared code could end up in multiple bundles Import in the main bundle to really share the code Using React.lazy() automatically creates a new bundle
- 13. React.lazy()
- 14. <Suspense />
- 15. <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
- 16. <Suspense />
- 18. 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
- 20. Data Resources
- 21. Data Resources Data resources are functions that Return data that is available Throw a promise when data is not available yet Resolve when that data becomes available Reject if there is some failure How the data is requested is not important Just an implementation detail Several data loading libraries already support this approach useSWR(), react-async and Relay Workshop createResource() based on gist by Ryan Florence
- 23. Using a Resource
- 24. Implement the Resource Replace the useAbortableFetch() hook and apply resource.read() in: .srccomponentsMovies.tsx .srccomponentsUsers.tsx .srccomponentsUserMovieDetails.tsx .srccomponentsUserUserDetails.tsx
- 25. <Suspense /> & Errors
- 26. <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
- 29. 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
- 32. Fetch from render Typically a component requests it’s data when it first renders Then displays a fallback component And re-renders when the data is available
- 33. Start fetching before render Sometimes we can predict data requirements before render And start the request before the component is first rendered Possibly the data is already loaded when the component renders For example when a user hovers over a navigation link 👉 Beware: Can lead to extra AJAX requests Not every hover is followed by a click on the link
- 36. Concurrent Mode
- 38. Use click event
- 39. Event running
- 40. Concurrent mode
- 43. Concurrent Mode
- 45. Concurrent Mode Legacy is the normal way of rendering a React application The only option that is fully supported Concurrent mode is the goal Only available in experimental builds of React Blocking mode is an intermediate mode Only available in experimental builds of React Use the experimental type definitions withTypeScript npm install react@experimental react-dom@experimental
- 48. Concurrent Mode Use ReactDOM.createRoot() to create a root object And use it to render the React application Note: Still has the “unstable_” prefix
- 50. Using <SuspenseList /> Orchestrating <Suspense /> boundaries
- 51. 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
- 53. Using useTransition() To prioritize work
- 54. 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
- 56. Conclusion You can use <Suspense /> today Suspend when lazily loading components Suspend when fetching data When not doing server side rendering Better UI approaches can make your application more responsive Start fetching data before you render the component It’s a trade off Concurrent mode Not recommended for production applications today Can make large applications more responsive
- 57. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 57