Transcript

Kent C. Dodds: 0:00 Now, we're going to make some HTTP requests. Every application that is worth really anything is going to be interacting with a backend or doing some sort of async work and that is a side effect.

0:14 We use useEffect to do this. I give you a little bit of background and you can explore that I explain one of the gotchas that you have with useEffect, so feel free to read through that and show you how I typically write my useEffect. They're doing async stuff, but you can write it however you want to if you're a big fan of async/await, but just make sure you do it this way.

0:33 For the exercise, we're going to be making a request to a backend that will give us Pokémon data. If we go up here, look at the final version, and here, you can look at Pikachu and you can type in Mewtwo and Ditto. That will load you the information for that Pokémon.

0:55 Because I didn't think that everybody would know all the Pokémon that they could type in here and because typing is kind of boring, I also added these as examples, which are buttons that you can click on to load that particular Pokémon. You don't have to actually type in here.

1:11 The only part that you're going to be working on is this part, which is the area that makes the request. That's this Pokémon info function component. The rest of it is all abstracted away for you. We also have this Pokémon data view, which is the part that shows the Pokémon information. All you're responsible for is the part to make the request to get the Pokémon information.

1:35 There's a bunch of extra credit in this one as well, for handling errors and using a status to avoid an isLoading boolean. That's going to be a fun one. Storing the state in an object to explore the difference between storing multiple elements of state and storing a single one. That one's interesting. I think you'll enjoy that.

1:57 Using error boundaries, this is a new type of component. Specifically, an error boundary has to be a class component. This will be maybe a little bit new. It's literally the only class component you should ever have to write. Maybe in the future, the React team will give us another way to create error boundaries without having to use classes.

2:17 Have fun with these. I'll see you on the other side of the exercise.