Complete Intro to React, v5 Declaring Effect Dependencies

Transcript from the "Declaring Effect Dependencies" Lesson

[00:00:00]
>> Brian: Getting closer. We have one problem here, that setBreed's not defined. So what we're gonna do is, if you remember, we did pass that here and use drop down at the end, the setState function, right? So we're just gonna grab that too. So setBreed, and now that'll be defined, right, cuz that's coming from the use drop down.

[00:00:27]
>> Brian: Not using breed yet, that's okay, but the thing that we're getting here is hey, just so you know, it contains a call to to setBreeds without a list of dependencies. This can lead to an infinite chain of updates. So the problem here is with useEffect, you have to declare your dependencies, which is kind of an odd phrasing this, but stick with me for just a second.

[00:00:55]
>> Brian: useEffect is going to run, as of right now, after every single time that render gets called, which is too frequently, right? So right now, every time I typed into location here, it would request a new set of breeds. That's obviously incorrect, it's not what we wanna do, right?

[00:01:13] We only wanna request breeds when animal updates, as well as on the first time.
>> Brian: So what you can do here with useEffect,
>> Brian: Rather than have this run after every single render, we can say only run when these things change. So what you do is you declare the things that it depends on.

[00:01:35] So here it depends on what? It depends on animal, right? Cuz if that changes then we need to change it. So we'll put animal there,
>> Brian: But it also technically depends on setBreed and setBreeds. Now, you and I both know that that's never gonna change, but,
>> Brian: ESLint demands that they still be there because it still technically depends on them.

[00:02:01] So setBreeds as well.
>> Brian: It doesn't matter what order these come in, it's just a list of dependencies that React will check. Cuz if any one of these things changed, rerun this effect after it renders, otherwise, don't run it again, right? So now if location changes, because location's not in here, it's not gonna rerun this effect.

[00:02:26]
>> Brian: So let's go make sure this actually works. If I refresh this,
>> Brian: Now, notice that breed is no longer grayed out. If I click on here, you can see that it actually has a lot of new dogs in it, right? And notice that if I start typing in here it doesn't request new breeds.

[00:02:53] However, if I changed the dog to be cat, notice that it's gonna gray out here for just a second.
>> Brian: That was very fast, but now notice here that it has American bobtail, and Calico, and Cornish Rex, and things like that. Same thing with small furry. I guess you can adopt a skunk.