00:00 So our objective here is to be able to take this and extract it to the module scope. But here VS code is like, hey, I need to extract it as a function so I can pass the color. But we want to say, hey, I don't need the color. I'm going to get it from somewhere else.

00:17 So now if I say extract it now, I can extract it to a constant in the module scope and I'll call this the footer. And then right here. We just have a problem because the footer is expecting this is props. Well, guess what?

00:32 We don't need props anymore because we're going to get the color from context. So let's create our color context. Color context is create context from react. This is going to be either a string or null.

00:48 We'll initialize it to null and then we'll make a whoops, we'll make a function called use color. And we'll do our typical hook for accessing context. So here's our context use from react color context.

01:05 If there's not context, then we will throw this error and then we'll return the context. Great. So then in here. We can get our color, use color and let's just check all these off.

01:22 We're done with this, done with that. And now our footer can be referenced in this way. And then we can wrap all this in the color context provider. So I'm just going to let's get rid of this and then we'll grab all of this stuff and do color context.

01:40 Stick this in there and then our value will be the color. And would you look at this? We're done. So take off this. We'll increment the app count and then stop. And. Oh, my goodness, we are re-rendering main.

01:59 That's expected because we're not doing any optimizations for main, and so it's re-rendering as a result of that. We are rendering the context provider. That's also fine. And then we're re-rendering the app. That would be expected because the app is the one that's storing the state. But we are not re-rendering the footer. And that was our objective.

02:18 Isn't that cool? Just by putting stuff into context, we can move this outside of the render entirely and reuse that react element over and over. Now, the real trick is, but wait, does that re-render at all? Because it should re-render when the color changes. And my friends, it definitely does.

02:38 If you click on this and have it re-render with one of the color changes, then you click on the footer. You'll see when it asks, why does it re-render? Because the context change. Also, if you don't see that, you can click on the gear here and make sure you have record why each component rendered while profiling.

02:57 And that will explain that. So, yeah, the context changed. Therefore, it re-rendered. And if I click on this again and we increment that, then increment this and then change this, then we'll have three commits to work with. The main changed because the hook changed, that count changed.

03:14 And here the main changed because its parent component re-rendered and we don't have any optimizations. Here, the context doesn't say why it changed, but it should because the parent re-rendered. And then here, two hooks changed as and that resulted in the app re-rendering.

03:32 I'm not sure what it means by two hooks because we just incremented the count there. But maybe there's some other magic going on that we're of which we're not aware. But the most important one here is this footer. The context changed, so it re-rendered.

03:46 So we are successfully getting a re-render for our footer, even though we aren't passing it any props at all. And therefore, we can extract it and just reference it as it is. And it will only ever re-render if the context changes.

04:02 And there's no need for any other additional optimization or anything like that, which I think is actually pretty legit. So good job, you.