Use Suspense to Simplify Your Async UI
|
Learn how React Suspense simplifies asynchronous state management in web applications, eliminating spinners and flash of loading content. This workshop covers enabling React Concurrent Mode, fetching data, handling errors, improving loading states, and more. Prepare for the future of asynchronous state management.
????
SUSPENSE IS EXPERIMENTAL
One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.
This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user– whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.
The end result is countless spinners and the dreaded FOLC (flash of loading content).
React Suspense is the answer to these problems.
React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.
It’s a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.
In this workshop, you’ll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.
Course Content
Course Intro
Enable React Concurrent Mode
Fetch Data with React Suspense
Handle React Suspense Errors with an Error Boundary
Write a generic React Suspense Resource factory
Refactor data fetching with useEffect to Suspense Resources
Where to Position React Suspense and Error Boundaries
Improve Suspense loading states with useTransition
Use CSS Transitions to Avoid a Flash of Loading State
Modify Suspense Config to Avoid a Flash of Loading State
Cache React Suspense Resources
Preload Images to Improve Loading Performance
Create a Custom Suspending Image Component
Implement the Fetch as you Render Approach for Improved Performance
Create a Custom Hook that Creates Resources
Use SuspenseList for Coordinating Suspending Components
Fetch Modules Eagerly for SuspenseList
Wrapping Up with Experimental React Suspense
User Reviews
Be the first to review “Use Suspense to Simplify Your Async UI”
You must be logged in to post a review.
There are no reviews yet.