This course has been updated! We now recommend you take the React Performance course.
Transcript from the "Data Fetching & useEffect Hook" Lesson
[00:00:00]
>> We are going to talk a little bit about fetching data, we have been suspiciously quiet about like any real like dealing with a synchrony. Like we've talked a little bit about like we lose the binding of this cuz of the event loop, we haven't talked a lot about fetching stuff from servers.
[00:00:21] And that's the kind of next beast that we need to slay. Turns out we hinted at this. We danced around it. We alluded to how we might handle this, right? We talked a little bit about useEffect, right? And in the very simplest version of even a traditional react state the easiest thing you can do is uncomponent did mount.
[00:00:42] Right, go ahead and fetch it and set state right that is still true as the simplest possible way of doing this. And like I said, a lot of the kind of stuff we get for free and the newest versions of react, make it so we can get like most of the simple educate is done.
[00:00:56] If you're getting to the point where you want REDOX observable so you can use like RXJS, so you can cancel, request and debounce, right yeah, at that point it's time to look into those kind of heavy weight tools, but then there's also [INAUDIBLE] you need to bring all that stuff in all the time in your application.
[00:01:15] Unfortunately, there's always the issue of it depends. So we're gonna switch to a different app, we're gonna switch to the Star Wars characters app. And it's pretty straightforward, all it does is it kind of loads from a fake API, it's a real, that's not fair, that was mean.
[00:01:31] It's a real API that just fetches a bunch of characters from the Star Wars universe that we can shove onto a page. So the npm start. And also open that up. Right now, you can see that it's got some dummy data. Right? This is hard coded in data.
[00:02:02] We'll take a look. We'll take a tour of the application in one moment, but this is really it right now. It should hit the API, get a list of all the characters and display it on the page, right. Now we talked a little bit about that kind of time based state right there is a part where it is loading, or there could be an error, like those are different things that can happen.
[00:02:21] So we're gonna talk a little bit about that in this one. Eventually, we'll also take a look at the kind of master detail view that you've seen a lot of applications. If you think about the Apple Mail app, you'll see the mail messages on the side. And then the detailed view in the middle right,there's a kind of common pattern for applications and Which one we're on a lot of times should be determined by the route, right?
[00:02:43] Yes, we could just keep it in state of which index they're currently on. But it would be great if they're looking at a given Star Wars character if we store it on the URL. And that'll create some challenges for us as well. So we'll go over and we will take a quick tour of the application here, we've got the index.js and right now that is loading this dummy data, right?
[00:03:08] The dummy data is just some hard coded in data that we would expect to get back from the API, we'll actually hit the API in a second. This endpoint is just simply a hard coded end string, it's just I don't want to type that. We've got this index which right now is loading the dummy data and passing it to the characters list, very similar to what we had in the last application right, and that gets past the individual characters, so on and so forth.
[00:03:40] The only issue is we do have react router in here that we'll be using a little bit later. So like you can technically click on any of them, and they will show the URL but that's not our major concern just yet. All right, so what we want to do is we'd love to just actually like hit the API.
[00:04:03] And we know that we can call a side effect to go and do that. So what is the simplest like possible version of this? We talked in the very beginning about using some kind l of sensible default right, in this case, I happen to know that the part of the response we're gonna want is simply an array, right, in this case.
[00:04:27] And so starting out with an empty array so that mapping over it works makes total sense for us. We'll get better at this progressively as we do it. So we can say something like React.useEffect. And this is a hey, when you mount, what I want you to do is go ahead and we're gonna say, all right, fetch.
[00:04:48] We've got that endpoint. And I, again, I'm doing some of this from memory. If you want, you can actually we hit up the endpoint you just go to the base URL. You can see what I would generously call the API docs that'll load in about one second. I'll show you we've got characters, the ability to get one character and the ability to search and query for a partial match on a character name, right so you can see, I'm fighting actually really initially.
[00:05:26] Cool. So we've got that in place, so I happen to know that I want slash characters to get all of them. And so we'll go ahead and we'll go back into this index we'll say slash characters. So with fetch, we need to do then. And we'll say then.
[00:05:46] [SOUND] Response and it's JSON. If you don't like the fetch API and you like Axios, you can use axios. I'm writing fetch cuz it is the default built-in one. You can use whatever, you can use dollar AJAX if you want, right? If you like your API library, you can keep your API library.
[00:06:10] I am just using the kind of built-in one because it's the lowest common denominator. So in response will is JSON and then, now we've got the actual JSON response. And here we'll just say, okay, say characters and this is gonna be in this case, it's gonna be, Response.characters, right?
[00:06:37] If I go and look at the API results, it's characters and it's an array. I know that looks scary but it's just an array of data. Very similar to the dummy data that we had before. So we've got all of that in place. And then if something goes terribly wrong.
[00:06:56] Now, do not save if you're following along and you have that important in there. Let's not save the file. Why? Cuz I think I've warned you about this previously. We've got this set characters in here. And it's going to change the state, the state is gonna trigger rerender.
[00:07:17] There are no dependencies on here, which means that is going to then fire the AJAX request, which is going to set the characters which is gonna trigger rerender, which is gonna fire an AJAX request, which is gonna set the characters there's gonna trigger rerender and If I do it and I catch it fast enough, it'll just be bad.
[00:07:35] If we all do it, we'll probably DDoS the server, which will make the next little bit of our life pretty difficult. So what we'll do is we wanna make sure that we at least just do it when the component mounts, and we'll see a case where we wanna actually have an actual dependency in there, but in this case, that'll get us most of the way there.
[00:07:51] Joe?
>> Is there ever a reason when you Is there ever a reason to not use effect without that second argument?
>> I wanna say no. [CROSSTALK]
>> Have it call all the time?
>> Right, is there maybe some, no asterisks.
>> Okay.
>> Right, if two years from now, someone has come up with a really great pattern around it.
[00:08:13] I will like, you know, I've given myself an escape hatch, but I will basically say that no, right? The idea, like why would you want to immediately re-fire it again, right? That is, I think it'll usually like even React will catch you, and development mode would be like yeah, you've done this too many times.
[00:08:30] And again, that's why that [INAUDIBLE] that will actually catch you is really good too. So at this point, we will actually stop it.