00:00 So if we dive into this report here on that interaction of clicking force re-render, you'll notice like there's actually not a whole lot here. It's just a click and then it goes through some of the react stuff is going on here and then it gets into some of our code. So here's our app component. That's a function. So it's showing up in here.

00:19 And then we have search cities and that's definitely the thing that's causing this to be so slow is that search cities call. If you dive into that, you're going to see that it calls into match sorter, which is a third party module. And that's for a lot of folks. That's where the boundary is like, Oh, that's a third party module. I'm not going to bother with

00:36 that at all. And I can understand that you just want to ship. You don't necessarily, you didn't sign up to contribute to open source today. But it just so happens that match sorter is my package. And so I'm looking at this thinking, Oh shoot, I've got something I got to figure out what, what is going on with this? And if we dive into this a little bit, we're going to see that there

00:55 actually a lot of the same thing happening over and over and over again. And the reason for that is because the amount of stuff that we're sending through match sorter is a lot. If you take a look

01:07 at the cities dot JSON file, it is not small. And so even if even though match sorter has been optimized a fair bit to be as fast as possible while still providing the value that it provides,

01:22 the fact that we are running through so many cities is going to be a bit of a problem for us. So we need to avoid an unnecessary computation here to make this experience a bit faster. Now, there are other things to be said for this, like, Hey, maybe we could,

01:40 well, we will do other things to improve the experience here. But yeah, we definitely want to at least make re-render or this particular scenario rendering other things, unrelated things when the input value doesn't change, we want to make at least that faster.

01:58 So we're going to use memo right here. That'll give us our cities will pass in our search or our input value right there so that when the input value changes, then we will actually perform the computation again. And so now if we do the same thing over again, here, let's first select

02:18 one of these items. And we're on a 6x slowdown. I click on this, I come up here, I hit force re-render, come down here to stop. And now you'll notice there's like, I can barely see where it happened. But if you look closely, you'll see where that click event happened. I think it's right

02:36 here. Yep. Here's our click. And here's our function call. You'll notice our app is in here somewhere. Yep, there it is. But there's no reference to search cities in here because that input value didn't change when we forced re-rendered. It was some other state that got

02:51 updated. And so we don't have to worry about re-computing the matching cities for the input value that we've got there. So there you go. That's one of the values of use memo is to prevent unnecessary re-computations.