00:00 Let's start with this first one. So what I'm going to do is reproduce it, and then we'll make sure that it doesn't happen again. Pull up our DevTools, and we're going to do a search for dog, and then I'm going to submit three times. So we're getting a bunch of re-renders for that, but I'm looking for the pop state event. So we should not re-render when going backward,

00:19 because the query didn't actually change. But we are re-rendering because we're setting new search params every time we have a pop state event. So what we need to do is determine, did the actual value of the search params change, and if it didn't, then return the old search params so it doesn't re-render.

00:36 Okay, so we're going to take this previous params, prev params, there we go, and we're going to get our new params from that, and we're going to return, well here, let's just check, if the previous params to string

00:56 is equal to the new params to string, and if that's the case, then we can return the previous params. You don't need to change, otherwise we're going to return the new params. And so now, if I come here and go back, see we're still at dog, forward, back, forward, back, forward, sweet. So we are, let's just double check,

01:16 console.log pop state happening, updating maybe, and now I go back, forward, back, forward, awesome. Let's add another entry in the history for adding cat, so now we should re-render between these two, yep.

01:37 So we're in a good place there, re-rendering properly when we should, and not when we should not. Pop state happening, updating maybe, but we didn't update, so we're in a good spot there. So that takes care of this one. Now let's come down here to this one. So this is when we call set search params.

01:56 That is happening inside of our form when we submit. So let's start over from scratch right here. Gonna open this up in a new tab, there's no history at all, and I'm going to choose dog, and we're gonna submit, submit, submit.

02:14 Each one of those, you'll notice, is re-rendering. So, and we'll see we have a setting search params there. I hit again, hit again. So we should just get setting search params, but we should not be getting re-render. That is the objective here. So, we're gonna switch this to the callback form.

02:34 We'll say pre params, and yeah, we can, yep. Our AI assistant has got us taken care of there. So if the previous version of the params, two string, is equal to the search params, so there's no change, then just return the previous ones. Otherwise, return the search params. That's it, that one's pretty straightforward.

02:55 So we save this, and now, if I go submit, submit, submit, we're setting the search params, but we don't, there's no change needed, and so we're not re-rendering anything. But then if I change this, we're gonna get that, and submit that, and we're in a good place. Everything is working the way it should,

03:15 and there's nothing that matches dog in Caterpillar, but there you go. So that is the optimization. Whether it's use state or use reducer, if you return the exact same thing that it gave you for the previous version of the state, then you will not get a re-render reactor. Just say, oh, no state change,

03:35 so therefore, I will not re-render. There you go, optimizing state, pretty fancy.