Kent C. Dodds: 0:00 React Concurrent Mode and Suspense really enable and encourage following a pattern called Render-as-You-Fetch. This is a little bit of a mind-bender. I want to give you an example of three different ways that we typically fetch data when we're rendering with React.

0:16 For our first one, this is Fetch-on-render. Here, this is the code for this one. We have a lazily-loaded module. This is our PokémonInfo component that we're rendering our PokémonInfo into. We can take a look at that.

0:31 Inside of this PokémonInfo component for this one, we're actually making this useEffect call to actually trigger loading this Pokémon. In our actual app here, we have the form that we're rendering out, and Suspense and Error Boundary.

0:48 The Suspense boundary is necessary for the lazily loaded code and not suspending the component. We're actually not suspending at all. We're just using a regular useEffect.

0:59 For this one, we've loaded some of the resources and everything. If I close this out, and then I choose Pikachu, for example, then we're going to see we have some code being loaded here. That's the code for the PokémonInfo module.

1:14 When that code is loaded, then we can make the request for the PokémonInfo from the Pokémon GraphQL API that we're hitting. When that's all loaded, then we can load the Pikachu image. We get this waterfall effect where we have to first load the code, and then when the code is loaded, we load the Pokémon information. When the Pokémon information is loaded, then we load the image.

1:39 The next thing that people typically do is called Fetch-then-render. Here's an example of Fetch-then-render. You're still lazily loading the code, but the fetch request happens in the parent right here. We have this usePokémon custom hook that we're using right here to load that Pokémon.

1:59 When that Pokémon name is updated, then we go ahead and load all of the data. Once that Pokémon is finally loaded, then we go ahead and render the PokémonInfo, which is our component that's lazily loaded. Then we put all the responsibility of loading fallbacks and error handling in the parent.

2:18 If we take a look at this component, it's pretty minimal, but it is being lazily loaded. Let's take a look at what this ends up looking like. We clear out all of this. Let's say I want to load Charizard. We're going to make that GraphQL request first. We load the code for it, and then we load the image.

2:39 We're still getting a waterfall. It just changed what things are loading first. The idea behind Render-as-You-Fetch is quite a bit different.

2:48 Let's take a look at that code. Here, we have this createPokémonInfo resource, which is the part of our code that's responsible for loading data. If we dive into that, it's basically just the create resource stuff with a few more bells and whistles that we'll learn about pretty soon.

3:05 Then this React.lazy, we're still loading the Pokémon component. It's simply taking that Pokémon Resource and reading out the data. In the initial render, it will suspend, and then the parent can manage that loading state through React Suspense. When that resolves, it goes ahead and renders the REST out.

3:23 Let's take a look at what happens in this case. Now, if I load in Mew, we're going to get the GraphQL request. Right here at the left, you can see it's all happening all at once. We're also loading that image, and we're also loading the code.

3:39 We're doing it all at exactly the same time, which means things load quite a bit faster, especially if the component that you're lazy loading is actually a lot of code, or the data that you're loading is also a lot of code.

3:52 The whole idea behind Render-as-You-Fetch is you start fetching the data. As soon as you have all the information, you need to start fetching the data. That's what we're going to be working on for the next several exercises. It's just working our way toward this idea of Render-as-You-Fetch.

4:10 You can go ahead and read through some of this background information. For this particular exercise, we have this form right here. Your job is to take this code that we have written with the Fetch-on-render paradigm and switch it over to the Render-as-You-Fetch paradigm by creating a resource, and then suspending inside of PokémonInfo and adding a Suspense and Error Boundary around here.

4:36 Over the course of the next few exercises, we'll iterate to improving this experience further.

4:41 We also do have some extra credit. Don't miss out on those. We'll learn about Suspense and Error Boundary positioning. Then you absolutely can play around with those fetch approaches that I just showed you in that examples directory. I encourage you to check that out.

4:56 All right, so have a good time with this one, and I'll see you on the other side of the exercise.