Kent C. Dodds: 0:00 The Suspense is killing me. No, it is. No, just kidding. It's not. React Suspense is this cool thing. It is already available and we already used it in the React Performance workshop, where we use React Suspense component and a fallback for lazily loaded code.

0:18 However, there's this new thing that I'm excited about called React Suspense for data fetching and Concurrent Mode. You put those two things together, and you have just this amazing declarative API for data loading and any asynchrone. It's awesome.

0:36 It's not ready yet. What we're about to experience is going through the jungle with our machete or whatever. It is uncharted territory, but it is fun. If you're into that, then look forward to this.

0:51 Let's dive in here in our React Suspense workshop. The workshop repo is just React Suspense. We come down here and you'll notice this giant warning.

1:01 I'm telling you, this stuff is experimental, and there's already been changes in React Master that impact some of these videos. They haven't released that stuff yet, so I can't update the videos. That's where we're at. Things are changing at a rapid pace. Just keep that in mind.

1:19 I have updated some of the documentation in the background and stuff to tell you what things have changed. I'll try to keep that up to date as things do change. Just keep that in mind. This is super experimental stuff, things will change.

1:34 If you're not into that, you can go ahead and skip this one. If you want to see what this is all about, then totally give this a look. Definitely, don't miss Dan Abramov's talk way back in 2018, where he talks about some of the cool things that Concurrent Mode is going to enable because we're going to be leveraging some of those cool things.

1:55 This is going to be a good time. Let's grab this code. We'll run the update or run the setup script and all of that. We'll get it locally here. Once you have it locally, you can get it running.

2:06 There are a couple of unique things here. We have some examples. You'll definitely want to look at those. In particular, we'll be looking at fetch approaches here. You want to take a look at that. Open up the the DevTools and take a look.

2:19 Also, we have enabling Concurrent Mode, which you might find interesting. It really is quite simple. Here's the old way, here's the new way. That's how you enable Concurrent Mode. I've even got a blog post about it. You can take a look at.

2:30 Preloading images. That's one thing that a lot of people had a little bit of a struggle understanding what this is all about. You'll want to spend a little bit of time in this little example. Don't worry, I'll show you when you want to dive into that to get an idea of what this is doing.

2:47 I'll even show you what it's doing myself. You'll want to play around with that a little bit. We also have this SuspenseList thing, which is a whole app, to show you how to use SuspenseList in a typical scenario, where you might want to marshal the way the loading states are handled.

3:04 The cool thing about Suspense is that it gives us a really declarative way to handle asynchrony. It also is all about performance. It is a real performance booster as well. That's something else that I'm really excited about with React Suspense.

3:19 There are also somethings that you learn in this workshop that you can apply to your code today. Like Fetch or with these Fetch approaches, you have Fetch-on-Render, Fetch-Then-Render, and then Render-as-You-Fetch, which is an approach that is popularized by Suspense with data fetching. You actually don't need Suspense to be able to do this. I'm looking forward to showing you that as well.

3:45 Anyway, let's take a look at what we've got in here. We have simple data fetching. All of these are going to be using this Pokémon form that you've been used to. Actually, the simple data fetching is going to really blow your mind.

3:59 This is going to show you absolutely, 100 percent, this is the fundamental idea behind how the Suspense API works today. You're not going to write your code this way, but this is how it works and how your abstractions are going to work, assuming they don't change everything on us. No guarantees on any of that.

4:21 Then we're going to talk about Render-as-You-Fetch making abstractions for some of this stuff, useTransition and caching resources creating a special component so that images can suspend. We've got some cool extra credits here to help you avoid waterfall and Render-as-You-Fetch on that as well. That one's pretty cool.

4:42 Then Suspense with a custom hook. This is where things really get interesting. The use or the value of learning Suspense right now is so that when it's released, you have a good mindset for what Suspense is all about. You can be the one to build the amazing abstraction that everybody uses. That's what's cool about this.

5:03 I imagine that most of us are going to be using Suspense through other libraries. Maybe you're going to be the one to build the library that we all use. That'll be cool. Then we're also going to talk about coordinating Suspense components with SuspenseList, so we can see how these different things load in and make sure that they all load in in the way that they're supposed to.

5:25 I'm excited about that. I hope you're excited about that. Look forward to going through this jungle of experimental stuff with me, and I'll see you on the other side of it.