Kent C. Dodds: 0:00 Let's get crazy with context. We've got our count display here and a counter component here, and then we have our app that renders both of these things.

0:08 We want to share state between these two, so that we have the count as state and the setCount as an updater to that state. The easiest way to do this would be to put this in the app or honestly combine all of these.

0:22 We don't need three components for this, but this is a contrived example, just to keep it simple for you, before we get into more realistic examples of using context. Let's just stick with the structure that we've got here and use context to solve this particular problem.

0:38 The first thing that we're going to need to do is create context. I'm going to make my CountContext with react.createContext(). I'm not going to provide a default value. We'll talk about that later. With that, I now need to make a function that will act as my provider component, so here we're going to make a function countProvider() and here, this is going to return the CountContext.provider.

1:05 We'll take some props and we'll forward on all of these props. This will just be a wrapper component which I now can come down to the bottom and wrap all of this stuff with my countProvider, and now this countProvider can provide the context value that I wanted to.

1:22 One thing that I should mention here is I could just do CountContext.provider with the value and so on and so forth right here, but I like to put everything into a component that manages its own state. It can take props, it can do useEffect. It can do all sorts of things in there. That's why we are going to make this countProvider that's going to render the context provider here.

1:46 On top of that, we need to have some value. The value that we want is a state and a mechanism for obtaining that state. For us, we can just use a simple useState, and I am going to have a count and a setCount. We will initialize this count to , and then I need to provide a value to this provider, so that consumers will have access to these values. I will just make a value here and we'll take that value there.

2:15 Now, our count display can get access to this value through context, using the useContext API. The reason that works is because we have this countProvider inside of our tree. What context is going to do is it's just going to say, "Hey, you want to get access to some context value, let me look up in your tree to find the closest provider of that context, and I'll grab the value from that provider."

2:42 Let's go ahead and get our value from React useContext. We want to pass this CountContext, so here we've got that CountContext, we've got our value. The value is this array, so I'm going to destructure it in place, and I'll get the count from that. Ta-da. Then, we'll do something very similar for this one. Except in this case, we want the setCount value.

3:07 We don't need that count value, so we'll leave that comma right there, skip that item in our destructuring. We'll save this and bam-pada-dam, it's totally working, no problem.

3:19 In review, what we did here was we created a context. We created a function that uses that context provider to provide a value. Then, we used the useContext hook to consume that value from that CountContext.

3:36 This is all made possible because our provider is being rendered further up in the tree from the consumers, allowing us to have some implicit state shared between this provider and each of these consumers.