React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

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

Taylor Bell: All right. Hey Kent, thanks for meeting up today.Kent C. Dodds: Yeah, sure thing. Thank you.Taylor Bell: Yeah, so I wanted to talk to you about your new course, about using Suspense to simplify async UI. Just to get started, what is Suspense?Kent C. Dodds: Yeah, great question. Suspense is the ability for you as a user of React, developer of React, to tell React to that, hey, this component's not ready because the data that it needs hasn't loaded yet. And so, you can say, stop rendering this component and render it after I get my data for this component. And then, you can provide a way, a fallback UI while that is happening, while there's any suspending components, show this, instead.Kent C. Dodds: And then, there are ways to handle errors and that kind of thing. But that's the whole idea behind Suspense; is allowing the developer the ability to tell React to stop rendering a particular component because something's not ready for it to render yet.Taylor Bell: And why is that an exciting thing? I've seen Suspense written everywhere, and you've just explained what it is, but why is it such a game changer?Kent C. Dodds: Yeah, that's a great question. There's so much code in pretty much every application dealing with asynchrony. And so many bugs come from thinking about how data is changing over time, and just thinking about temporal issues in general. You can render this now and then when the user's made a few changes in the future, then you try to render it again, and it doesn't work right or something.Kent C. Dodds: And so, asynchrony in UI has always been a problem. And so, having Suspense make that asynchrony and just thinking about time just go away, it drastically simplifies the code. And then, on the other side of it, there are things that are built into Suspense and built into React with concurrent mode that make you, not only not have to think about time, but also improve the user experience as well.Kent C. Dodds: So the loading states that you present to the user can be a way, way better. You can coordinate loading states, which is actually a really difficult problem without something like Suspense. So instead of showing the user 12 loading spinners when they hit your page and having things load in place and pop around all over the place, you can maybe just show one, and then have things pop in in a more defined order to make it... And at the end of the day, you get a better perceived performance for the user.Kent C. Dodds: What's cool is the React team has been researching this stuff for years, and they've been using Facebook as their test bed for all of this stuff. And so, what we're getting, even though currently it's experimental, what we're getting is actually really solid because it's based off of that year's experience.Taylor Bell: Cool. And so, can you walk through the material you cover in this course?Kent C. Dodds: Yeah, sure. It's an 18 lesson course, and two of those lessons are the intro and the outro, to give me an opportunity to tell you how experimental this stuff all is because it is just total fresh stuff. It's not actually released stable yet. So I just really want people to understand this is very likely that some of these things will change, but the concepts that you're learning are absolutely worthwhile.Kent C. Dodds: But yeah, so we have 16 actual lessons on the material, and we're going to talk about enabling concurrent mode and why that's useful.With the new create route API. We talk about data fetching, and what we're going to do is actually refactor some traditional data fetching with Use Effect to Suspense. So you can get an idea of how the old way was done, especially if you're used to doing it the old way, and compare that to the new way with Suspense.Kent C. Dodds: And then, the Suspense APIs are actually super duper low level. And so, because of that, they're not exactly ergonomic, and it's easy to shoot yourself in the foot, which is actually one of the reasons why I think they're going to try and make some changes to help alleviate some of that pain. But we're going to build a little abstraction to alleviate some of that pain ourselves. And so, we'll go through creating that abstraction that we'll use for the whole course for this resource factory things so that you can interact with asynchronous stuff; whether that is fetching data from an end point, which is what we're doing, or if you're getting Bluetooth data or if you're getting geolocation, whatever asynchronous thing, this little abstraction will help you do that.Kent C. Dodds: And we build it from total built for a specific use case, and then we build it into a generic abstraction from there. So you get a really good idea of what's going on inside of there, which I think is a great way to learn these kinds of things. And yeah, then we get into some of the positioning of Suspense and error boundaries, which is a really important topic. We talk about use transition as a mechanism for having a lot more fine grain control over the loading state for our users, and avoiding the flash of loading state. If, let's say, you show your loading state after 200 milliseconds, and then the data loads in 250 milliseconds, well, then for 50 milliseconds, the user's going to see a loading state and that, to the user, just appears as a flash.Kent C. Dodds: And based on the research from the React team, that flash actually makes the user perceive your application to be slower. And so, instead, what we can do is if we're going to show a loading state, we'll show it for at least 200 or 300 milliseconds. And even though it actually takes longer for the user to actually see the content that they're trying to load, they still perceive it as being faster because there's no flash.Kent C. Dodds: So we look into how you can use Use Transition, that new hook in React, to control this type of loading state and loading experience. And it's actually a lot easier. I actually implemented that exact thing when I was doing Angular JS stuff. I just basically made every single interaction take at least 300 milliseconds to accomplish that. And this is even better because if it takes less than a certain amount of time, then it won't show any loading state at all, which is awesome.Kent C. Dodds: So I adopted into: let's just always show a loading state, and with the tools that React gives us, you can show a loading state conditionally based on the time. So it's really cool and it's quite easy to use. I'm really happy with that. And when we get into caching resources... Also images are notoriously a problem on the web because there is some asynchrony going on there, but there's not really a good way to control it. And so, we show how you can make a custom suspending image component.Kent C. Dodds: And I also teach about how the browser cache works with images and we leverage that for some of this, which is interesting. And we do some eager loading of images so that we push the waterfall of requests over to the left as far as possible, so things load quite a bit faster, which is pretty cool.Kent C. Dodds: And then, there's a pattern in Suspense that has taken Twitter by storm, and it's in the documentation where they show three different approaches to loading data. First is fetch on render. When you render, then you make the fetch call, that's what most people are doing with their Use Effects or the componentDidMount, or there is a fetch and then render; so let's go get the data. Once we have the data then we can render stuff. And that can be problematic if the stuff you're rendering is a lazy loaded component; Okay, let's go get the data. And then, now that we have the data, and now let's go fetch the code. But we could actually do both of those at the same time. And that's what Suspense enables in a really nice way with this render as you fetch model; that I will demonstrate all three of those and demonstrate why render as you fetch is a better approach and why the React team is so hot on it right now.Kent C. Dodds: And then, we get into making a custom hook that is Suspense-full. And then, we talk about Suspense List, and there are some workarounds that we're going to work into with Suspense List as well. So there's tons of stuff in there, and I am in love with all of it. I think it's awesome and I think you will, too.Taylor Bell: Well, that sounds like the best way to end this possible. No, that's awesome. Thanks so much, Kent, for meeting today and I'm looking forward to checking out the material. I know that you'll keep us updated as Suspense continues to evolve.Kent C. Dodds: Yeah, you better believe it, man.Taylor Bell: All right, cool. Thanks Kent. We'll talk to you next time.Kent C. Dodds: Okay, thanks.

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

Sketch Notes

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

Kent C. Dodds

What you'll learn:

Prerequisites:

Course Content