Complete Intro to React, v5 Effect Lifecycle Walkthrough

Transcript from the "Effect Lifecycle Walkthrough" Lesson

[00:00:00]
>> Brian Holt: Let's work through this whole cycle. I recognize that I have introduced a lot of steps here. So let's work through the entire cycle of beginning to end of what happens here, okay? First thing, I have search params here, right? So this gets rendered for the first time.

[00:00:21] It gets all this information, sets all these hooks up so the first location is Seattle, Washington. Breed is gonna be an empty array and animal is going to be a dog, and breed is going to be an empty string, right?
>> Brian Holt: It's then going to schedule this useEffect, but this is not actually gonna happen yet, right?

[00:00:41] This does not run on the first render, okay? Then it's going to return all of this markup,
>> Brian Holt: Right? Then its going to finish that, it's going to render that all to the DOM so the user's going to see all of this first, okay? Then after that, it's going to run the schedule effect.

[00:01:04] Keep in mind you can have ten effects in here, right? Right now we just have one effect, but you can have many effects in here. So after the first render, it's going to call this function right here.
>> Brian Holt: So this is going to separates to be empty array.

[00:01:22] It's gonna cause separate to be an empty string.
>> Brian Holt: And then, it's gonna go out to the API,
>> Brian Holt: With animal, and it's going to get breeds back from the API, and then it's gonna call setBreeds. But keep in mind, this is gonna take some time, right? This will take a second or something like that, right?

[00:01:41] So what's gonna happen is it's going to render, and then a second later once this comes back with the breed strings from the API, it's gonna cause another re-render, right? But, the only thing that's changed here is breeds. Does this particular effect depend on breeds? No, right? So it doesn't re-render the next time, right?

[00:02:03] Because breeds changed, but animal, setBreed, and setBreeds, none of these changed, right? So it just runs that effect once and then it's done, okay? So now, fathom for a second that go and I type in the location, right? So now location is updated state. And it goes here to useEffect and it says hey, has animal setBreed or setBreeds changed since last time I ran this effect?

[00:02:30] No, right? So it does not schedule this effect to run again, good so far? Okay, then I go in and I select animal to be, it was dog and now it's cat. So it's gonna re-render but it says, hey, did animal change, it did, right? I changed it from dog to cat.

[00:02:56] So it's gonna set immediately set breeds to be empty array, and empty string is going to then call the API, get the new breeds back and it's gonna re-render again after that.
>> Brian Holt: That makes sense?
>> Brian Holt: So this is how useState and useEffects work together to kind of manage these kind of state updates.

[00:03:23]
>> Speaker 2: So for the dependency array that determines if useEffect is run, that functions run. When we put in setBreed and setBreeds, we're just saying basically if those were reassigned and then it would rerun it.
>> Brian Holt: That's funny that you bring this up. I had an at-length discussion with a couple of the React core team members of I think that's silly, because that's never gonna change.

[00:03:53] And they basically said, we don't care, do it anyway. I would think this is better because this is more clear about your intention, right? Only at run when animal runs. But you're gonna get an error of,
>> Brian Holt: SetBreed needs to be in there. So I gave up, this is what the community's doing, so I'm teaching you what the community's doing.

[00:04:18] I mean, in theory, it's not a bad idea, right? I guess in theory it could be updated or something like that, but whatever, I don't know.
>> Speaker 3: So it's just looking for any external variable that you're using in that function?
>> Brian Holt: Right, so the idea here being that I have setBreed, right?

[00:04:38] And if I'm using setBreed because it's defined in here inside of this function itself, that means if any time this setBreed does change, it should re-run the effect. Which is true of Animal, right? I'm using Animal here, so any time that Animal changes, I need to re-run the effect.

[00:04:57] So that's what they're chasing after, this will save you bugs, right? Because if I didn't have Animal in here, actually this would be a good thing to show you. So if I take Animal out of here, it will request it the first time, and I'm gonna get Australian shepherd, right?

[00:05:11] But if I change this to be cat now, it's not gonna update. Right, because it's not gonna go back to the API because it thinks like, I'm good, right, I don't have to change, because, I don't depend on animal.