This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Effects" Lesson
[00:00:00]
>> Brian: So what we're gonna start doing here, is we're actually gonna to start reading live data from an API.
>> Brian: Which is gonna be exciting, so we're gonna see pets to adopt her. And so this is gonna actually come from Petfinder which is like one of the easiest ways to find pets to adopt.
[00:00:16] So if you see a patt here use that you want to adopt, you should definitely do it. And the Petfinder client that you brought in the front end master slash pet is already all set up to do that. So I'm gonna show you now how to handle a synchronous code inside of React.
[00:00:34]
>> Brian: Okay, so what I want you to do first, again I mentioned earlier that while you can put in different locations up here, I actually have, at least temporarily, limited this to Seattle, WA, and San Francisco, CA. Reason being is that we have one developer key and we don't wanna hammer their API, so that's why we're kind of limiting ourselves to just a couple of geographical areas.
[00:01:01] This might change in the future, if we can figure out better ways of doing this. But just to be on the safe side right now, that's what we're gonna do. Okay, so let's go ahead and start using some data here. So inside of App.js, sorry, this isn't App.js, this is inside of SearchParams.js.
[00:01:25]
>> Brian: We've already got an animals here, but we're also going to get the pet client up here.
>> Brian: And underneath all these use dropdowns, and things like that, we're gonna use another thing from React here called useEffect.
>> Brian: Now, if you're familiar with React, already, useEffect is gonna take the place of several of the lifecycle hooks, right?
[00:01:52] So, it's gonna take the place of componentDidMount, componentWillUnmount, and componentDidUpdate. So if you don't know what those are, then that's fine, you can learn these for the first time. But if you're coming in with some familiarity, that's what this is gonna replace. So here I'm gonna say useEffect, and then I'm gonna give it a function.
[00:02:18]
>> Brian: And then here I'm gonna say pet.breeds,
>> Brian: dog. This is gonna return a promise. You can actually see that it returns a promise.
>> Brian: That returns a breeds response. And then here, just for now so we can see what it's doing, I'm gonna say console.log and console.error.
[00:02:49] And what this is saying, if the call is successful then log output whatever the response is, and if it's not successful, then send it to console.error.
>> Brian: So what's happening here? So useEffect is disconnected from when the render is happening. So what this is actually doing is this is scheduling this function to run after the render happens.
[00:03:17] So what's gonna happen is it's going to render the first time, it's going to schedule use effect to run, but then it's going to render first. So all of this stuff gets rendered first before anything happens inside of useEffect. Good so far? All right, so this does not happen immediately.
[00:03:33] As soon as this happens, as soon as searchParams renders for the very first time, t's then going to run this effect, okay? And it's not synchronized its not like this happens and then immediately this happens, it happens and then soon thereafter this effect will run. Now, why do you wanna do this?
[00:03:55] Well, you want to do this because you don't wanna slow down that first render, right? You wanna show your users something immediately. You don't want them to have to wait to see something, you don't want them to wait for some sort of Ajax request to come back. You want to immediately show something and then go to the API and try and request data.
[00:04:14] So that's why we're doing this. So let's go take a look what that actually looks like. If you go over here into your petinder you should see here this object breeds, breeds, and then you should see it comes back right now with 257 breeds. So if I look at one of these you can see Husky, Icelandic sheepdog.
[00:04:36] I didn't even know that was a breed, but apparently it is, right? And so it comes back with all these things back from the API. And if you look at your network tab you'll see that this is just JSX, XHR. This is going to the pet devs dev-apis, and it is getting that back from the API.
[00:05:00]
>> Brian: Which is great, right? Now we're getting all this information back from the API, so now we can actually setBreeds to be all of these various different kinds of breeds of dogs.
>> Brian: So what we're gonna do instead of useEffect, we'll just replace this and say,
>> Brian: The first thing we wanna do is, whenever this run through we want to update breeds, to be empty array.
[00:05:29] Because if we're requesting new breeds and there's already breeds in that, then we want to clear them out. We're gonna update the breed.
>> Brian: To be an empty string. This useEffect, it's gonna get run whenever we're changing sets of breeds, right? So if I go from like cats to dog, I need to get a new set of breeds, right?
[00:05:48] So the first thing I'm gonna do is I'm gonna clear out whatever breeds were in there. So if there's husky and poodle, I'm gonna clear all that stuff out of there. And if I've selected Bichon Frise or something like that, then I need to set that to be empty string, as well, because I can't have a Bichon Frise cat.
[00:06:04] So once that's done, then I'm gonna say, pet.breeds, which is that function that's gonna retrieve that from the API. I'm gonna parse in whatever animal is right there, so animal
>> Brian: And then I'm gonna say .then,
>> Brian: And that's gonna give us something back from their API, and I know inside of that object it's gonna have breeds.
[00:06:38]
>> Brian: Okay?
>> Brian: So we're just structuring out this breed cuz I know that's gonna come back from the API. And then I'm gonna say, if you look at these objects, if we go back here to our console, notice that they are objects, right? So name, Fox Terrier, links, something else, right?
[00:06:59] We actually just want the names. We want to throw away all those links, we just want the names. So we have a list of objects that we wanna transform into a list of strings. So how do we do that? Map.
>> Brian: So what we're gonna do is, we're gonna say const, breedstrings = breeds.map, and we're gonna turn,
[00:07:24]
>> Brian: Name into name.
>> Brian: And then here, we're gonna say setBreeds to be breedStrings.
>> Brian: So what's going on with this? Well, we just structured out the name, right? So we grab poodle out of that and then we would just return to poodle, right? You also could have had to spend like breed, object, and then be breedObj.name, right?
[00:08:00] Same thing. I just think this is a little bit more elegant.
>> Brian: Okay, and just in case there's an error from the API, you just put console.error there. So it'll just feed whatever the error is into console.error.
>> Brian: This would be the same as doing like error, console.error error, right?
[00:08:28] Same thing.
>> Brian: Okay.
>> Brian: Yeah, I have these as set, rather not update
>> Brian: So change this to be set, not that.