00:00 For this first step, I have this, I am the footer and this counter. So it kind of resembles this message example we had earlier. And I want you to pull up the dev tools for React. So if we go to React components, and make sure you have this installed, of course.

00:18 And then I want you to actually know we want the profiler. You click on this little button, and then click on the account incrementer, and then click the button again. Then you should see our app is re-rendering, and our footer is re-rendering. But you'll notice that I am the footer doesn't change when we increment the button.

00:37 And so your job is to kind of follow this same example here, where you're going to take the message and extract it. And then I want you to do this again and see whether the footer gets re-rendered. It's not going to, but that's your job is to learn how to use the profiler and

00:55 identify when things don't get re-rendered. I notice sometimes the flame graph you'll see here doesn't quite show. I'm not sure exactly why, that could be a bug in the dev tools or something. But typically in the ranked version here, I will be able to see everything that actually does get rendered.

01:12 So you can click on that and you can see, this re-rendered because the parent component re-rendered. So that is your objective here, is to make it so that the footer doesn't re-render when the count is incremented. Again, I just want to emphasize, I've probably done this a lot, but I want to really emphasize that if this is your application,

01:31 this is all that you're doing, then 100% you shouldn't even bother thinking about performance optimization. This took one millisecond, this took less than 0.1 millisecond. This is not something you need to optimize at all. But we're learning principles that we can apply in bigger scenarios, and

01:50 so we're going to do this anyway. All right, let's get to it.