Kent C. Dodds: 0:00 Here's the typical life cycle of a React app. First, you load the page and then the app renders. That's the part where it's calling all of your functions to get these React elements that you're creating. Then it reconciles those ranked elements with the ones that you gave it last time. In this case, since it's the first render, there's no reconciliation. These are all brand new.

0:19 React knows that it needs to create these DOM nodes, set up event listeners, and all those things. That is what the commit phase. It's going to take those React elements, create DOM nodes to represent those, and then stick those into the DOM.

0:31 Then we get a state change. The user clicked on something. Some event happened. That triggers a re-render, calling all of our functions again to get the new values for the React elements that it needs to render.

0:44 It will reconcile those React elements with the ones that it was given last time. Based on the changes between what it had before and what it has this time, we're going to get a commit to update the DOM.

0:57 React is really fast at doing this, but there are some situations where it actually is pretty slow. We want to give little hints to React to say, "Hey, I actually don't need to re-render."

1:07 The reason that's necessary is because sometimes there's some state change that happens that triggers a re-render of a component when that component actually doesn't have any updates to the DOM to make. That's what we call an unnecessary re-render.

1:22 Feel free to read through some of this. I do want to make sure I emphasize that you want to fix slow renders before you fix unnecessary re-render. Please do read about that. I have a little example here that I'm going to show you to give you some experience with the React DevTools.

1:39 Again, like our last exercise, this one literally only has two lines of code that you need to change here. Not a whole lot of code changes. Mostly you're going to be hanging out in the developer tools. This time, it's the React DevTools.

1:53 If you pull that open, you're going to see a counter and an input, and you'll want to pull open your DevTools. This time, you're going to look at the Profiler in the React DevTools. I want you to click this button, start profiling, and you can click that button to increment the count. Type in a single character, and then stop profiling.

2:17 You'll see a bunch of information here in the Profiler. Let's explore this just a little bit to set you up for success for our exercise. Each one of these represents a single commit, something that happened based on some state change.

2:31 The ones that are colored means that there were actual updates to the DOM. You also have this other view right here to get a ranking of which one of these components took the longest. It looks like they're all pretty fast.

2:44 What's interesting about this is that when we clicked this button, our input re-rendered. We can take a look at this right here. We have our example. We have our div, and we have our Count button. That should render because when we click on the Count button, it increments that button, but this input doesn't care anything about that count's value.

3:05 Updating this name input component shouldn't trigger a re-render. That's what we call an unnecessary re-render, is because this name input re-rendered, but there were no DOM updates necessary based on that state change. The only reason that this re-rendered is because the parent component re-rendered.

3:24 You can avoid this unnecessary re-render using some utilities that React exposed for you, like React.PureComponent or for our purposes, React.memo. I'll show you how to use that right here, pretty straightforward.

3:39 For our exercise, we're going to be hanging out again with this list of cities. We want to memoize the menu itself, as well as each individual list item. I want you to compare before and after to see what that profile session looks like when you memoize these components.

3:57 Go ahead. Pull up the Profiler. Start a profile. Interact with the components here to update some state and see if you can't make it avoid re-rendering components that shouldn't be rendered.

4:07 Another thing I want to show you quick before you get started is this settings right here which will allow you to hide commits below a certain threshold. You may want to play around with that and see what impact that makes on the Profiler display.

4:22 Also, we do have some extra credit that you can look forward to on this one. Using a custom competitor function, which is going to get intense, and passing only primitive values which is a good practice when you're memoizing components so you avoid breaking memoization.