00:00 we're going to take things to the extreme with element optimization to take advantage of a special feature that React has for not bothering, re-rendering things that it's already rendered once before. What does that even mean? Let's talk about this little example here. We have this message component,

00:19 we have this counter, and here we're rendering the message inside of the counter. Anytime this count is changed when we are re-rendering the counter, React has to re-render this message because it doesn't know what there is about this message component that could

00:36 possibly change as a result of this state updating. It's going to be calling this function. Every time you click the counter, it's going to say re-rendering greeting, boom, boom, boom, boom, every time. However, you'll notice that this message component isn't actually doing anything all that interesting.

00:53 The greeting is static and the message just returns a div with the greeting. No matter how many times you click the counter, we're going to be returning the same UI, the same React elements. If we were to change this a little bit and say, hey,

01:08 message is now a variable that's assigned to the message component, then we can interpolate that message component inside of the counter. What's interesting then is that the React element that's created via this JSX, that React.createElement call,

01:25 that element is going to be an object that will be triple equal. JSX1 is triple equal to JSX2. These are exactly the same. When React is going through and doing its virtual DOM diffing, so the old React elements with the new React elements, and it's like, okay, I'm going through, I'm going to compare the button,

01:45 the button's different, so we're going to have to do something about that. Then I'm going to look at these messages. These are the exact same object. I don't even need to bother calling the message function because I know it's going to be exactly the same anyway. As a result, we can make things a fair bit

02:02 faster because now we don't have to bother calling the message, and whatever the message renders, we don't have to bother calling that all the way down. While this isn't necessarily going to move the needle on performance for a simple situation like this,

02:18 it definitely could move the needle for other use cases. Of course, it's not just extracting things, but it's this principle that we're going to be evaluating and leveraging through the course of this exercise.

02:35 It's the idea of this element is unchanged, therefore, we don't need to re-render it. We'll actually take a little bit further than just whether the element has changed or not by bringing in React.memo. You might be familiar with that, but we're going to work our way toward that, and you're going to see a bunch of different approaches

02:54 to the way that you structure your React elements so that you can take advantage of some of the optimizations React makes to not have to call your components. If you want to dive a little bit deeper in this idea, then it would be good for you to review what even is JSX.

03:14 You can take a look at this blog post, and then this one simple trick to optimize React re-renders describes how the React elements end up being the same, how React says, okay, these are exactly the same, so I'm not going to bother calling the thing. Feel free to dive into this if you want to have a little bit

03:33 more understanding before you get started with this exercise. But I think that should be sufficient for you to get into this exercise. We've got a bunch of things that we're going to do, so I'm looking forward to it. Let's get started.