Kent C. Dodds: 0:00 If you've got an expensive calculation to make in the function body of your component, then useMemo is the hero you need. Here, I give you a little bit of background on this and how to use the API so that you are all ready to make the code changes that you need to make.

0:15 You're going to find that there are not many code changes you need to make. In fact, there's just one right here. It's quite simple. Most of the time, you're going to be using the developer tools so you can identify situations when useMemo and its sibling useCallback are necessary.

0:31 I give you a blog post about those two hooks and when you might want to use them. I want you to profile this particular experience here. We can search through cities. We can say Salt Lake City. You may have noticed as I was typing this that it's not very responsive. That's the performance problem that we're talking about.

0:51 I want you to use the developer tools to figure out what it is about this experience that makes it so poor for performance. If I open up the isolated page here and then open up my developer tools, then I can go to...not the React profiler. We'll get to that eventually. We're going to go to the Performance tab.

1:09 This is going to allow me to record performance profiling stats on the experience that I'm going to execute here. This is going to show me all sorts of things.

1:20 One thing that you might want to do is set the CPU to 6x slowdown here so that you can simulate a mobile browser or somebody on a lower-end machine who's not using, like the tech monster that you're using. We'll hit record, and then we'll do some interaction.

1:38 You can hit force re-render, or you can highlight an item, or whatever you want to do there. You hit stop, and you can see screenshots of what's going on at that point in time. If we move that down, you can see this wild-looking flame graph. You can move around this by holding down the shift key and scrolling to go up and down.

2:01 If you let go of the Shift key and scroll, that's going to zoom it for you. You can also click and drag up here, and that's going to zoom for you as well. You may also notice that you have timings here.

2:12 These timings are executed by React so you can get an idea of what is it that is happening here. We've got a menu update. That's our menu component right here that's happening. That is taking a long time for one reason or another. You can use this to determine what the browser is doing that's making this janky experience.

2:31 Most of this exercise is you spending time identifying the bottlenecks in our experience. Specifically, the thing that we're going to be optimizing here is this experience. What I want you to do is click on one of these items.

2:45 We'll say, "Edna." That will update our text input here. Then you're going to hit Record. Without doing anything else, don't highlight anything or whatever, just click force re-render and then stop the recording. You'll notice this red spot right here. You also notice one that starts at the beginning.

3:04 Quite frankly, I'm not sure why that shows up. It always shows up. It doesn't make any sense to me why that is happening, but you'll notice this red line right here. That's when we clicked that force re-render button. I want you to find out what is it about this flame graph that's making that experience so slow.

3:25 Can you solve that particular performance problem with useMemo? That's the goal of this particular exercise. Then you can take it further by the extra credit. You want to run in production mode. If you want to, you can run the build and serve it locally, or if you want to, you can look at the production deploy and pull up the DevTools there.

3:48 Also take a look at putting this getItems function into a web worker. This gives you a quick little introduction to that. You can be off to the races in putting some of this more expensive logic in a web worker. That one's pretty fun. You'll enjoy that, and then we'll see you on the other side of the exercise.