Transcript

Kent C. Dodds: 0:00 Let's talk about Context. Context is an API that allows you to share state between different components in your React tree.

0:10 It's typically something that is better suited for libraries than for your application code. It helps you solve problems with [inaudible] , which you can go take a look at. Typically, it's better to reach first for composition as a solution to this problem.

0:26 There are definitely some good use cases for Context in your application code. If you're building any sort of component library or abstraction like that, then Context can help you solve that a lot and in the advance patterns part of Epic React, you'll learn all about using Context to solve those kinds of problems.

0:44 Here I show you a very simple example of using Context that you can learn about there. I give you some explanation on default value and that kind of thing. Definitely read through some of this stuff.

0:57 For our exercise, we're going to keep everything in a single file. I've tried to label things for where typically you'd put these different elements into different files and things, but we're keeping it in a single file to make things a little bit easier for you so you don't have to jump around a bunch of files.

1:13 Don't worry, you'll get some experience of using Context in a real-world scenario, so you'll be able to figure out where these different pieces go in a typical application.

1:23 This is pretty contrived. It's just an increment count button that you're going to make work, so it increments this count. In the exercise, you'll do a very simple version of this and then we've got an extra credit to make it a little bit better.

1:41 On this extra credit here, we're going to jump over to our good old Pokémon thing where we're going to add some caching so that you can switch between the Pokémon that have been inserted into the cache and we're going to use Context to make this work.

1:59 Enjoy all these and I'll see you on the other side of the exercise.