00:00 The secret for performance improvement here is actually composition. This is one of the patterns that we learn about in the advanced React patterns workshop, where instead of having main accept the color and forwarding that color along to the footer, we actually accept the footer UI.

00:16 Now, how does this improve things so that the footer doesn't re-render when the count is changed? Well, what it does is it takes the footer out of the main component, so creating that element happens inside of the app. And so, when the count re-renders, that footer prop doesn't actually change.

00:35 Let's do it, and then maybe this will make a little bit more sense what we're doing here. So we're going to cut that and put footer right in here. Then we're going to remove color and say footer, and that footer is a React node. And we'll get rid of that, we'll get rid of this, just to keep track of where we're at.

00:53 And then right here, instead of passing color, we'll pass the footer. And that takes care of it right there. So now, we create this footer UI, pass it to main, and main can re-render as many times as it likes. It's not going to change the footer UI.

01:09 The footer UI will remain the same across these renders of the count, because when you increment the count, we're not going to go up to the top of the React tree and re-render the whole thing. So we're not creating a new footer JSX element here. We're going to just React will have the same one it had last time.

01:28 The props are unchanged. And so for that reason, incrementing the count should not affect the footer. So let's try that out. We're going to hit record. We're going to increment the count, and then we'll change the color. And it looks like it's all still operating the way it should. On that first count increment, we only changed the main. We only re-rendered main.

01:48 And then when we changed the color, we re-rendered everything, because our state is managed up here, and main is getting re-rendered. As a result of that, it's getting a new footer UI anyway, so it does need to re-render for that reason. And then that footer also is going to be different,

02:03 because that React element was recreated as well. And of course, the color changed, so it did need to be rendered again. So there you go. That composition actually does improve performance, because it eliminates unnecessary re-renders.

02:20 When a component is rendered by a parent and has some state change in that parent, and it doesn't care about that state, yeah, by composing, you can make it faster.