00:00 So, we've refactored things a little bit. Now we have the color chooser, we have the app count, and then we have the general count. So, this is the count that's inside the main component. And here we can see the refactoring. We've got our footer as an element and everything.

00:16 But unfortunately, well, still, when I increment the app count or the count inside of main, so like this, that's not going to trigger a re-render of the footer. But by incrementing the app count, this right here, that is going to trigger a re-render because we're making a new footer UI.

00:33 And then, of course, changing the color is also going to trigger a re-render of the footer because it needs to be re-rendered in that case. So, what we're trying to accomplish in this exercise step is we want to maintain what we have now, with the main being the only thing that renders when the main count is updated.

00:51 But when the app count is updated, that middle one right here, then I want to make it so that the footer doesn't re-render because it doesn't depend on the app count. It only depends on the color. And what we're going to do to accomplish this is use context. We'll put the color inside of a context provider

01:09 and have the footer consume that. And then we can actually extract the footer outside of the app again, the way that we did in the very first step of this exercise, so that, or rather because the footer doesn't need the color prop anymore, that color value is inside the context.

01:26 And so, as a result of not needing any props, we can extract it and now we can reuse those JSX elements again. So, your objective is to make it so that when I record one of these profiles, clicking on the app count, incrementing that,

01:42 will not reveal the footer as one of the components that re-rendered. Okay, let's get to it.