Current section: Custom Hooks 36 exercises
solution

useCallback

Loading solution

Transcript

00:00 Great, so now we come down here to our setSearchParams. We're returning that here. And if somebody uses setSearchParams inside of a useEffect, then any time the components are re-rendered, that useEffect would run, which would be unnecessary. So we're going to stabilize this setSearchParams by wrapping it in useCallback.

00:19 So setSearchParams is useCallback version of this setSearchParams. So we'll just do this and that. And then our dependency array will be empty because we actually don't have any dependencies. Yeah, and that's really it.

00:38 If you wanted to, you could change this to an arrow function. There you go. That could look better, I guess, if you wanted to. But yeah, we don't have any dependencies in here that are something that React can track. If we wanted to use the current search params,

00:57 like, there we go. So here, we're no longer assigning search params here. We're referencing the ones from up here. And so React is like, hey, you need to set search params in there so that I can update the callback whenever that changes. Otherwise, we'll have an old version of the function that is referencing an old version of the search params. And so that's why it's giving us that warning right there.

01:17 But by doing this, then anytime there's a state change in our search params, that'll trigger re-renders everywhere. This is honestly where the dependency array stuff gets kind of annoying, if I'm being completely honest. But most of the time, you don't really have to deal with this. It's only occasionally, and you just have to be kind of thoughtful about,

01:37 how do I limit the number of dependencies I need to include in here? And a lot of that just involves putting more things into the use effect or putting more things into the use callback and referencing things that are like imports for modules. That's not going to be trackable by React anyway, so it doesn't say that you need to include that

01:57 in your dependency array, stuff like that. Okay, great. So now this is not going to trigger a use effect unnecessarily just because the set search params changed. Because set search params is 100% stable, there's nothing in the world that can make set search params be different because we have our dependency array and it's empty.

02:16 So, well done.