Transcript

Kent C. Dodds: 0:00 For this one, it's probably easiest to just show you the problem. Here I go to Pikachu, and then I go to Charizard, and then I go to Pikachu again. I already went to Pikachu. I feel like I should cache that somewhere.

0:13 Here we're just going to learn how to cache resources. In our final version, you go to Pikachu, then you go to Charizard. We get that loaded, and then we can go right back to Pikachu, and right back to Charizard, just back and forth, no problem. That's the idea behind this one.

0:27 I just want to mention that caching is not a trivial problem and it's honestly one of the hardest problems in computer science. You do want to be careful of this, especially since the solution that we're going to present basically will cache these resources forever.

0:43 That is probably OK, because the Pokémon data that we're loading in here has never changed for who knows how long and probably will never change. We don't need to worry about it for this specific use case, but every use case is different.

0:56 You do need to watch out and consider your caching strategies and use maybe something like React-query that gives you all the right knobs to turn with regard to caching. This is just in general how would you go about caching data when all of that you're dealing with are resources.

1:13 That's the idea here. We do have a quick tip. Take a look at using promises and render. You want to watch out for that. Then in our exercise, we pretty much just have all of the emoji here to tell you exactly what you need to do for this one.

1:28 We do have some extra credits here to give you a little bit more of a real-world scenario by putting the cache into context and creating a context provider for that cache, and even adding a cache timeout.

1:42 Have a good time with these extra credits and things and we'll see you on the other side of the exercise.