00:00 Let's look at an interesting scenario here. We've got this useCount hook. We've seen this before. What if we wanted to share this state here? We have displayCount and incrementCount. One component is responsible for displaying the count and the other is responsible for handling the updates.

00:18 How would you do that? I guess you'd render it like this. But if you tried this, then you would actually be calling useState twice. You'd be calling it through the call stack, you call useCount and then down into useState. DisplayCount and incrementCount, they're going to have different instances of useState. They'll be totally different useStates.

00:38 Just because we put it inside of a useCount, we're calling that same function in both places doesn't mean they're going to share any of that state. We need to be able to share that state somehow though, if we want to be able to do something like this. This is how you do this with context. React has this createContext function you can use.

00:58 We're going to provide our context type here. We're going to have a count and an increment. We're going to initialize it to null because we couldn't provide any default value that would actually do anything useful. With our account provider, we're going to accept children.

01:17 This is a special function component that is going to be responsible for managing the state for us and it creates this value. That value is going to be passed as a prop to the count context we got from createContext. Then as children, we'll pass that down into the children of count context.

01:36 Then here, let's skip over some of this. We'll look down at the account provider. That is going to wrap the rest of our UI. What that allows is any of the React elements that are children or grandchildren, great-grandchildren, any of those will be able to

01:54 access that context value using a special hook called use. This replaces useContext. If you've been using React for a while, you might be familiar with useContext. That is no longer in vogue and we're using the useHook now,

02:12 which has multiple use cases and is an interesting name. But in any case, we can pass our count context to the useHook and we'll do a null check right here because we're initializing it to null. If there's no value there, then we're going to say, hey, useCount must be

02:31 used within the account provider. Then we return the context in the case that it is found. Then our displayCount and our incrementCount can access the count and increment, and it will be the same because it's coming from this count context which got the value there,

02:49 which created it from this useState and increment here. That is how you share that across different components. You'll notice that these functions or these components look exactly the same as what we had before.

03:08 This is the desired outcome, what we're trying to get to, is just something that's as easy as, oh, just use the count. Wherever it comes from, I don't know where it comes from. Somebody is managing that. I don't care. I just want to grab the increment, or I just want to grab the count. Now, a word of caution before we go too deep into this.

03:26 Context can be overused a lot because it seems like, oh, wow, this would be great. We can just share all of our state all over the place. I find that context is best used in libraries most of the time, and occasionally, it's useful in managing some of your own state.

03:45 I would say every app is going to have a couple of context providers, most likely. But React Router has a special API for context that allows you to share context from a parent route to a child route, so I just use that.

04:01 And React Router also manages all of my network requests and stuff like that too, like with loaders and actions. So I don't typically find myself needing to stick some data that I got from the server into a context either. The context really is just about UI state that you're managing, and you need it shared everywhere else.

04:21 The other place where context makes a lot of sense is in individual components or compound components that need to share some state implicitly, and we'll talk all about that in the advanced React patterns workshop. But it is an important API to use and to understand.

04:40 You'll be consuming context, and you'll want to know how to do that also. So this is the context API. We're going to use that in our fun little blog search example. So let's get into this exercise.