00:00 All right, our footer is just being used right in line here. And so as it stands right now, anytime this app count is updated, then our footer is going to get re-rendered because it's going to create a new React element and React's like, well, that's a different one from the one I had before. Let me call the footer to make sure that the UI didn't change.

00:18 We want to prevent calls to the footer. And so we're going to memoize the footer component itself. And then anywhere it's used, it will be memoized in such a way that React will just have to compare, okay, the inputs are the same, so I don't need to worry about re-rendering this. So let's take our footer is memo.

00:38 That's going to come from React. And we'll just wrap it up like this. Dun, dun, dun, dun. And now it's been memoized. So if we save this, we hit the record button, and we just make sure that all of these are re-rendering properly, and that one should not, and that should not re-render. So we'll take out the first two.

00:58 We visually saw that it is re-rendering, so re-rendered when the props changed, re-rendered because context changed, and here it didn't re-render at all, and there it also didn't re-render at all. So one thing that's not showing up in this profile is React actually performing the comparison every single time the footer is rendered.

01:16 And so that's probably not going to be, well, certainly it's not going to be a problem in this situation. Maybe if you had like tens of thousands of these, having React go through every single one and comparing before and after could potentially be less optimal, and we'll actually explore that a little bit more

01:36 in a future exercise. But yeah, this works out pretty nicely. But that's one reason why you might, like some of you might be thinking, well, okay, so why don't I no longer accept the footer, and we go back to accepting a name, and name string, and then render the footer right here.

01:56 Name, name, right? That would be like a little bit more standard React, I would say. Most people would probably do this more naturally. And yeah, you could totally do that, and you'll still wind up with the same proper scenario where the footer's not going to re-render for either one of those cases.

02:14 So no footer re-render there, no footer re-render here, because the footer's memoized, and it doesn't depend on those counts. The one difference between what we have now and what we had before is that before, React just had to compare, oh, the footer React element before is the same as the footer React element now.

02:34 And so that's triple equal, so we're all good. However, if we do things this way, now React has to go through every prop that the footer has and compare those individually. And that's, again, just a single prop, but if you had a bunch of props, maybe if you had many, many of these,

02:53 then it could be a problem. But I would venture to say that there's not a scenario in the world where this is going to be preferable over the composition approach from a performance standpoint, as provided the footer is memoized, and vice versa.

03:12 I think they're both gonna be just as performant with the footer being memoized. But again, all of this doesn't even matter unless you actually measure and identify that you have a real-world problem on your hands. And it's only once you've identified, I've got a real problem, that you should start looking into

03:32 all of the different things that we've done in this series of exercise steps. Because you really probably, like the vast majority of the time, you don't need to memoize your components, you don't need to extract them, whatever. But there are some really complicated UIs

03:52 and also use cases with really low-end devices and stuff like that where it does make sense. I just want you to learn how to use the tools to measure properly, to identify whether there's actually a problem. And the tool that we've learned right here, this will help you identify if you have successfully avoided unnecessary re-renders,

04:12 but that's not going to tell you whether the performance is necessarily great or not great. And that's what we're going to be doing in future exercises, is looking at the performance tab and learning how to throttle our CPU and all of that stuff. But this hopefully gave you an idea

04:31 of the various mechanisms that you can use to cause React to not re-render a component if you need to reduce how many times that thing is re-rendered. Typically, I would probably go with this memo implementation

04:47 for most of the time when I need to reduce re-renders. Context is also a reasonable solution to this problem. And even hoisting a React element or reusing it in the way that we extract it outside of a component. All of these are perfectly great solutions,

05:05 and now you know them all. Most developers who are working with React just learn about memo and then they throw memo all over the place and they don't know what's going on. Maybe I shouldn't say it that way, but a lot of people don't really know what's going on with memo. But now you do, and I think that is a really valuable thing. And we're actually not done with memo.

05:24 So let's continue in the workshop. We can explore more of this stuff. You definitely are going to need that so that you can make your React applications as fast as you possibly can. So good job.