Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "componentDidMount() & AJAX Requests" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian adds the componentDidMount() lifecycle method into the Details component. He’ll be using this method to trigger an AJAX request to load data for the specified show. Brian is using the axios library to do the AJAX request. The code for the application up to this point is on the v2-17 branch. - PLEASE NOTE: You must now add the apikey=frontend parameter when making requests to the omdb api. - https://github.com/btholt/complete-intro-to-react/tree/v2-17

Get Unlimited Access Now

Transcript from the "componentDidMount() & AJAX Requests" Lesson

[00:00:00]
>> Brian: We're gonna import axios, which is just a promise based AJAX library. Okay, we're gonna give Details a state, so we're gonna say getInitialState.
>> Brian: Then we're going to return omdbData: Empty object.
>> Brian: And what we're gonna do after that is we're gonna put a componentDidMount.
>> Brian: So we're gonna say from here axios.get('http://www.omdbapi.com/?') =${}

[00:01:12]
>> Brian: This.props.show.imdbID. That's right. Yep, we're gonna have to add that to the propsTypes up here, so put that up here. imdbID, which is a string.
>> Brian: So first of all, big shout out to OMDb, which is basically an API version of IMDb. The guy runs it on his own time, so I always encourage people to donate to it, because it's completely free.

[00:01:47] We don't have to sign up for it, we don't have to pass it a token. The guy is just awesome. So he, he or she I don't know who it is, but has gracefully agreed to allow us to use their API.
>> Brian: Okay, so we're gonna do that, then this is going to return a promise.

[00:02:09] So what I'm going to do right after that is I'm just going to say .then((response).
>> Brian: We're gonna say this.setState.
>> Brian: {omdbData: response.data},
>> Brian: And we're gonna put a catch.
>> Brian: And all we really wanna do is we just wanna say console.error.
>> Brian: ('axios error', error). It's just good to alert yourself that something went wrong.

[00:03:00] Typically you would do more here, but right now I wanna just debut it if it goes wrong.
>> Speaker 2: Raven is saying the same the query string should be, I can't read that exactly.
>> Brian: I.
>> Speaker 2: i equals.
>> Brian: Sorry.
>> Brian: Yeah, omdb.com/?i=, I forgot the i.
>> Brian: Okay, so what this is gonna do, this is going to go out to the API.

[00:03:53] It's gonna go grab the show that we're interested in and it's going to return it back to us. And then this is going to set it in the state in omdbData. This is going to have way more than just the rating of the show, which is all we're going to use.

[00:04:06] But like say you wanted to update the poster on the fly, and you wanted to update the trailer on the fly, and the description, all that stuff you could do some sort of cool merge to get updated data all the time. But right now we're just going to do,

[00:04:23]
>> Brian: Just the rating.
>> Speaker 2: So the first time it comes up it shows it. It does the call to get the data It does a setState which forces a re-render. And then you're going to hit it again, right? How's it not doing it if it's in a loop?

[00:04:40]
>> Brian: So componentDidMount gets called exactly once.
>> Speaker 2: Okay, so it's only if it mounts, it's only a mount and not a render?
>> Brian: Correct.
>> Speaker 2: Okay, sorry.
>> Speaker 3: Does componentDidMount get called then, subsequently, like if you navigate to a different state, then back to this state it would be called again, cuz it's gonna render it again?

[00:04:59]
>> Brian: Yeah, so it's gonna request that data again from the API, which we're going to fix with Redux. But that is astute, because if we go to the search page and then back to the same page, we're gonna request the same data over again, which kinda sucks.
>> Brian: Okay, so here inside of render,

[00:05:23]
>> Brian: We're gonna say let rating,
>> Brian: if (this.state.omdbData.imdbRating).
>> Brian: So this is basically saying, hey, if inside of omdbData, if you have an imdbRating that means the data from the API has come back. So then we're gonna show you the rating, otherwise we're gonna show you some sort of loading state.

[00:06:01] So if it's there then it's going to be equal to an h3 with just that data inside of it. This.state.omdbData.imdRating.
>> Speaker 2: You didn't close the curly brackets.
>> Brian: There it is, thank you.
>> Brian: else rating =, and we're gonna put up our spinner now. The img src='/public/img/loading.png'. Make sure you put your alt text on there so it spins.

[00:06:48] [LAUGH] loading indicator.
>> Brian: Again, this is a horrible use of alt text. One should never target alt text. [LAUGH] And I'm just saying this is ridiculous, please don't do this. This is just a horrible abuse both of CSS and accessibility.
>> Brian: Okay, so now we have rating, which is going to contain one of two components.

[00:07:17] It's either gonna be a loading state or it's going to be data that we have back from the API. And then between year and poster, we're gonna just throw that in there.
>> Brian: Okay, so let's save that and make sure that works. If we come back to frontend Masters React, hit Refresh.

[00:07:52]
>> Brian: It's fast enough that we don't actually even see it, the loading. But you can see right there that it's 8.3, which is live data back from the API, which is pretty cool. I wonder if I can get it? Yeah, the PNG doesn't even load before it comes back to the API.

[00:08:09]
>> Speaker 2: You can slow it down if you use the dev tools.
>> Brian: Yeah, that's a good idea.
>> Brian: Performance, is that where I would do this? Or Network?
>> Speaker 2: No, I think it's, yeah.
>> Speaker 3: If you throw the setState at a time out, too, you can kinda pause it for however long.

[00:08:25]
>> Brian: Well, I got into something else. So I just switched to using Firefox maybe a month ago.
>> Speaker 3: I don't know Firefox tools at all.
>> Speaker 2: I think it's in the settings, isn't it?
>> Brian: I think it's in here.
>> Speaker 2: Is there a little mobile icon or something?

[00:08:41]
>> Brian: Okay, so we'll try refreshing that. So Juan, this sucks. How long is this gonna take to load?
>> Speaker 2: We put it at least on 4G or something.
>> Brian: Yeah, there we go.
>> Speaker 2: There we go, okay.
>> Brian: There you go.
>> Brian: [LAUGH] Man, I have so many horrific stories of how I've abused the Chrome DevTools.

[00:09:21] I once left throttling on for like, a month. So I was getting a 3G connection on my laptop all the time, and I hated everyone and every website. That was bad. And when I found that I was like, what have I been doing with my life? [LAUGH] I probably wasted like a week.

[00:09:38]
>> [LAUGH]
>> Speaker 2: That's so bad.
>> Brian: Another horrible one is that you can turn off JavaScript with the Chrome DevTools and it's only off when the DevTools are open, but they don't reset that flag ever. So I was giving a workshop at AusCon, and I was just having these crazy bugs, where all of a sudden my app would just totally crash.

[00:10:05] And I was just like, what is going on? And then like it would work sometimes and then it wouldn't work and I couldn't figure it out. And I realized that every time I was opening and closing the DevTools it would crash my app. [LAUGH] I mean, I must have had that for a while, too.

[00:10:18] So, shit, it's just make sure you turn off throttling and turn off disable JavaScript. Okay, any questions about axios, whatever? The doc's really great for axios, so if you need that, go read that. But for componentDidMount, AJAX requests, setState, conditionally showing components.
>> Brian: So I guess one thing that I'll throw out there for specifically with doing componentDidMount and that way of doing things, it forces you to show some kind of loading state when you're loading data, and that's always a good thing.

[00:11:02] Like you want the users to feel like your application is interactive before it's actually interactive, right? And so that kind of forces you is like, okay, show them something then we're gonna quickly load data. And then we're gonna show you the real thing. And that's a positive pattern for doing interfaces.

[00:11:17] And React kind of strongly nudges you in that direction.
>> Brian: So something I'll just kind of throw out there real quick, notice I used an arrow function here. Typically that's not a big deal, but if you choose use function or not. However, it is in this case. If I'd put function here instead of arrow function, this would break.

[00:11:38] Why? Well, it would break because, what's this, right? That's a question you have to ask yourself in JavaScript constantly.
>> Brian: This, if you don't use an arrow function, is going to refer to the promise or the window. I don't remember what it's gonna be. But it's not going to be Details, right?

[00:11:59] And it needs to be Details because we wanna call setState on Details. By using the arrow function here we're not creating new context, which is one of the features of arrow function, so that it doesn't create new context when you create them. So it's going to be whatever the context it was called in.

[00:12:16] So it's called in componentDidMount, componentDidMount's context is details and so that's why this.setState works here with no magic, right? If this was function,
>> Brian: So you would either have to do .bind(this) right here. That would work. You could use the self pattern. That would be fine, too. There's a couple different ways to achieve that.

[00:12:47] But it's just really easy with arrow functions. It specifically is convenient with arrow functions.
>> Speaker 2: Question, what are the advantages of using axios over fetch?
>> Brian: I don't know if I necessarily have a great answer. It's just I've used axios for such a long time I just keep using it.

[00:13:08] The nice thing about fetch, is it's in the browser, right? So you just poly fill it and you can use it, so fetch is a perfectly acceptable way to do it as well. I just find axios really easy to use, and I've also used it so much I know the entire API.

[00:13:20] [LAUGH] I don't really have a better answer than that.
>> Speaker 2: Gus was asking, with React, how you deal with FOUC, so you never see React has not rendered on index.html?
>> Brian: Universal rendering, isomorphic rendering, server side rendering, whatever you wanna call it. And we would do that maybe in an hour or so we'll be doing that.

[00:13:47]
>> Speaker 2: Let's see.
>> Speaker 2: Things are bouncing.
>> Speaker 2: Is axios, fetch, our React-based AJAX, or can be used with other frameworks?
>> Brian: Yeah, they are not necessarily tied to any framework, they're just libraries.