🚧 **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.

I'm super excited that you're joining me on this journey of exploring the experimental React Concurrent Mode and Suspense for Data Fetching. The React team has been researching and working on this for years and they've been using these features internally for months and the result is fantastic.

This feature is totally experimental and some things might not work well or not work the same way when this feature is completely released.

Normally, I don't suggest you follow along when you watch Egghead courses, but for this one I'd encourage you to at least play around with some of the finished version of the code. So let's explore the codebase a little bit together before we get started.

Course Intro

To use all of the features available for Suspense for data fetching, we need to first enable concurrent mode. In this lesson you'll learn what steps you need to take to enable concurrent mode in your own app.

Enable React Concurrent Mode

Let's get started with the simplest version of data fetching with React Suspense. It may feel a little awkward, but I promise you that you wont be writing your code like this. When Suspense is stable, there will be libraries that integrate with Suspense. But this is approximately what those abstractions will do, so it's a good thing to know.

Fetch Data with React Suspense

Error Boundaries are the way you handle errors with React, and Suspense embraces this completely. Let's take a look at how to handle asynchronous errors with Suspense and Error Boundaries.

Handle React Suspense Errors with an Error Boundary

Using Suspense within our component isn't exactly ergonomic. Let's put all that logic into a reusable function so we can create resources anytime we need them and for any asynchronous interaction in our app.

Write a generic React Suspense Resource factory

A very common practice in React applications today is to request data when a component is rendered within a `useEffect` callback. Let's refactor that to Suspense with our new resource factory.

Refactor data fetching with useEffect to Suspense Resources

The only rule about positioning React and Suspense Error Boundaries is they must be somewhere higher in the tree than the component that's suspending or throwing errors. But where you put them in the tree has an impact on what's rendered when they are utilized. Let's play around with that a little bit to get a sense for how we should decide where those should be positioned.

Where to Position React Suspense and Error Boundaries

This video uses an experimental API that has been changed. `useTransition` no longer accepts a `SUSPENSE_CONFIG`. [Learn more](https://github.com/facebook/react/pull/19703#issuecomment-683165346).

React Suspense with Concurrent mode comes with a default optimization that is optimistic in that it waits a tiny bit for your suspending promise to resolve before making any DOM updates. But this can make the app feel unresponsive for some use cases. The experimental useTransition hook from React gives us more fine-grained control over the timing as well as the ability to show a pending state. Let's try that out here.

Improve Suspense loading states with useTransition

This video uses an experimental API that has been changed. `useTransition` no longer accepts a `SUSPENSE_CONFIG`. [Learn more](https://github.com/facebook/react/pull/19703#issuecomment-683165346).

Based on research at Facebook, we know that if a user sees a flash of loading state, they perceive the app as being slower. So let's improve the pending experience for users with faster connections using css transitions to avoid showing the loading state right away.

Use CSS Transitions to Avoid a Flash of Loading State

This video uses an experimental API that has been changed. `useTransition` no longer accepts a `SUSPENSE_CONFIG`. [Learn more](https://github.com/facebook/react/pull/19703#issuecomment-683165346).

By improving the loading experience for users with fast connections, we actually made the experience worse for people with slower connections using two additional configuration options `busyDelayMs` and `busyMinDurationMs` allowing us to communicate with React: "If the busy time takes at least x milliseconds, then show the busy state for at least y milliseconds."

Modify Suspense Config to Avoid a Flash of Loading State

Caching is a really hard problem, but it's important for good user experiences to make the app snappy, especially when you know that the data you're showing to the user is unchanged on the server. In this lesson we'll take a quick look at how we could do this in a simple way.

Cache React Suspense Resources

Web applications in general have a problem with images. As soon as an `<img />` tag is rendered, the `src` is requested. But that can take some time and the browser doesn't give us much of an API for what should be displayed during that time (or what to display if it fails to load). But the browse *does* implement a cache for images if the `Cache-Control` header is set properly by the server for the image. And if it's cached, then the browser can display the image instantly.

So, let's learn how we can preload the image so when an `<img />` tag is rendered, the image is displayed instantly.

Preload Images to Improve Loading Performance

Now that we know how to preload images, we can create a custom `<Img />` component which suspends until the image has been loaded into the browser cache. This way we avoid issues where contents bounce around when the image is loads and ensure that there aren't consistency issues with the data and the image that's displayed.

Create a Custom Suspending Image Component

Along with the release of Suspense, the React team has given us some recommendations for how we approach structuring our data loading so we can optimize both dynamic loading of code and data. There are two approaches to data and code loading that are common in the React ecosystem, and one that the React team is recommending called "fetch as you render." Let's compare these approaches to understand how they differ and why "fetch as you render" is the superior approach over "fetch on render" and "fetch then render."

Implement the Fetch as you Render Approach for Improved Performance

One of the coolest parts of React is the ability to take logic within a component and extract it to a reusable chunk (a custom hook or component). Let's take the logic around our resource to create a custom hook for creating a React Suspense resource.

Create a Custom Hook that Creates Resources

When a user lands on your authenticated page, what's the first thing they see? A bunch of loading spinners? Yeah, that's pretty common. It's not an altogether great experience, especially if things bounce around all over the screen while parts of the app pop into place. The problem is that you can't really control which of these things will load first. This is what `<React.SuspenseList />` was created to solve.

Here we have an example app that shows us this kind of experience and we want to improve the loading states with React's SuspenseList component.

Use SuspenseList for Coordinating Suspending Components

When using the `forwards` option for the SuspenseList `revealOrder` prop, SuspenseList will only render one of the suspending components at a time as an optimization. But our components are implemented with `React.lazy` so they don't request the module code until late. Let's preload the module code so we get that code loading as quickly as possible.

Fetch Modules Eagerly for SuspenseList

I hope you enjoyed this! Remember, it's experimental and things may have already changed by the time you watch this, but hopefully you were able to get the concepts out of this course and you'll feel prepared to experiment with these features in your own app. Have fun!

Use Suspense to Simplify Your Async UI

Instructor

What you'll learn

Course Content