Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Lifecycle Methods" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

React components have lifecycle methods that are useful when code must be executed at a specific time. Brian utilizes the componentDidMount() method for AJAX requests because this method will not be called by the server. This means the AJAX requests will only occur in browser-based instances of the application.

Get Unlimited Access Now

Transcript from the "Lifecycle Methods" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: So we're gonna talk about lifecycle methods that actually really are important in React. However, personally I try and minimize how much I use them. And actually I went through this entire workshop creating and realized I'd never made any lifecycle methods. I'm like, holy shit, this is really bad because I really have to know these things.

[00:00:21] So I just kind of tacked it on here to the end really quick. Actually it's out of a good example of when you would be passing context both on the server and the client. Notice how we're passing the data.shows in various places in our app. This is typically something that you request from a server, but if you have some sort of seed value, just make sure that that's loaded separately.

[00:00:47] That's a better answer to that question. So just make sure that you're kind of loading it into the side using requires rather than just only using Ajax, right. Cuz if you're only loading Ajax is this dynamic, sorry, the server side rendering is decidedly less useful because you're gonna load an empty page which is not very compelling, right.

[00:01:07] You want to show the user content as fast as possible, that's what I want to talk about. Okay, lifecycle methods. So what we're gonna do is I'm gonna add the live IMDB rating to our details page. So go to your details page, and what we're gonna do here is we're gonna make a request to an API.

[00:01:32] The OMDB API, which is actually just a reflection of IMDB, and we're going to request the rating from it. So, we're gonna be using a library called axios from the very very talented Matt Zabriskie and all this is, is it's a Ajax library that uses promises. It's really simple, pretty lightweight.

[00:01:56] You can use any request library that suits your fancy, I'm just gonna use axios cuz I like it. So this is actually to maintain some state now. So what we're gonna do is we're gonna add a constructor (props) super (props)
>> Brian Holt: And then we're gonna say this.state = omdbData: empty object.

[00:02:31]
>> Brian Holt: So we start with an empty state, then we're gonna put a componentDidMount() method, componentDidMount(). And use a space there. So this is a specific lifecycle method for React. So the lifecycle method in React is that basically as components go through different parts of their lives, they call these different methods.

[00:02:57] So the first one we've already used a bunch, which is getInitialState/Constructor depending which one you're using. That's the first one that always gets called when a React component is created. Number two is componentWillMount. componentWillMount gets called right before it's going to go in the dom. You're not gonna use componentWillMount a terrible much.

[00:03:18] But the big key to know about componentWillMount is that it runs both in the browser and in node. So if there's anything you wanna do that needs to happen as well as in node as it does in the browser. You're gonna use componentWillMount. Afterwards we're going to use componentDidMount.

[00:03:32] Which means it did finally make it into the dom. This does not get called in node and this is the perfect place to do Ajax calls. Right because you don't want your server actually making calls out to different other servers, that doesn't make any sense. You want all of that to be happening in the browser.

[00:03:48] So that's why we're gonna do all of our Ajax in componentDidMount like unexceptionally Ajax happens in the componentDidMount. I.e., you do actually end up using componentDidMount quite a bit because Ajax is a very common thing when we're doing web development. Okay, and then ultimately, lastly there's componentWillUnmount and what componentWillUnmount does is it runs right before it's about to exit the dom i.e., this also doesn't get called in node because that wouldn't make any sense.

[00:04:19] ComponentWillUmount is to do any sort of cleanup. So if you're doing it like any event listeners or if you're like hooked into other libraries or if you need to like unsubscribe from an observable or something like that. This will happen at componentWillUnmount
>> Brian Holt: Basically, a lot of times you're using componentWillUnmount to not leak memory, that's usually what it's used for.

[00:04:45] Your doings any sort of deallocations that you need to do. Okay, so we're gonna use componentDidMount to do an Ajax recall real quick. So we're going to axios.get, we're gonna do back ticks http://www.ondbapi.com. By the way I did contact the the guy that runs omdbapi. And specifically told him that we're gonna be hammering his API very brief, and then made a nice donation to him.

[00:05:18] So if you appreciate him, I'd encourage you to go make a nice donation to him as well, cuz I don't think he makes a terrible amount of money on it. This.props.shows and go in and grab this.props.params.imdbID. Nope, not that one. Props.ID rather, and then after the square bracket we're gonna put imdbID, right.

[00:05:59] So we wanna make the request against the omdbi ID and we wanna pass it, the ID of the show that we wanna get information for. This returns a promise, which I do not have much time to explain promises. So suffice to say, just follow along if you don't know what promises are, and then go look them up later.

[00:06:19]
>> Speaker 2: [LAUGH]
>> Brian Holt: Response
>> Brian Holt: This.setState. omdbData response.data and then we also want to put a catch cuz you always want to do that with your promises. Error console.error, axios error and then you just wanna log out that error. Okay so all this is gonna do is whenever the component finally does make it on the page.

[00:07:04] It's gonna reach out to the API, say hey OMBD API, give me all of your data about Daredevil, about House of Cards, whatever. And then I'm just gonna internalize that here in my state, right. That's all that's happening so far. So let's actually go make a display something from that.

[00:07:21] So an interesting thing is that omdbData is not always going to be there, right. So for example, when it runs on the server, it's not gonna be there. And when you first render it the first time, it's not gonna be there either. So you have to be guarded against that possibility.

[00:07:34] So what we're going to do up here is let rating If (this. state.ondbData.imdbRating. So if that ends up being available to me I'm gonna say H three, className equals video-rating, rating with this.state.omdbData.imdbRating. Close H3. Okay, so if I have the rating available to me, then go ahead and render this component.

[00:08:24] Otherwise not, okay.
>> Speaker 2: There is a question of why we're doing this here instead of inside of an action?
>> Brian Holt: Cuz I wanted to show the lifecycle methods. You actually probably would stick this in redux. But it depends on who you're asking. Cuz this would be more of view state because it's an individual IMDB call.

[00:08:50] So up to you.
>> Brian Holt: As you can see this is all very subjective. Year and poster. So between these two we're just gonna put our rating. So if this is not there then rating's undefined and nothing gets rendered out here. If there is a rating, then this gets rated out, this gets output there.

[00:09:20]
>> Brian Holt: Right, so let's save that.
>> Brian Holt: And hopefully that solved everything. So now it's listening again. Refresh your page, go into daredevil. So I got a nice error there. Cannot read IMDB ID of undefined. This.state.omdb dating
>> Brian Holt: That's a mystery.
>> Brian Holt: Where is it actually happening? Is that happening in the render?

[00:10:10] No, it's happening up here this.props.params. id.
>> Brian Holt: Right, damn it, that's not gonna work either. So I have to use assign show up here as well.
>> Brian Holt: So instead of doing this, I'm going to say thi.assignShow. I probably should've called it something more descriptive than that. That's what needs to happen.

[00:10:44]
>> Brian Holt: Right? Cuz we actually have to go find the show from redux. Yup. So hopefully that works. I'll come back in just a sec. Cool. So now you see this little 8.8 right out there but notice like when we very first load the page it just like suddenly pops on the page, right.

[00:11:06] It's not there the first time which is kind of fun.
>> Brian Holt: Yeah, so I had to use assignShow to get the correct imdbID.
>> Speaker 2: Okay, let me kind of branch and push this up. We have one more thing, and a half hour to talk about it. It's kind of a heavy subject but I really want to talk about it cuz it's super exciting

[00:11:58]
>> Speaker 2: Any questions about Ajax or lifecycle methods?
>> Speaker 2: One thing, I currently use many of the lifecycle methods. Is it smart to utilize redux and the store instead for the Ajax calls?
>> Brian Holt: Totally up to you. I don't have a good answer for what you and your app is

[00:12:22]
>> Brian Holt: Yeah, I try and avoid lifecycle methods as much as possible cuz it introduces this concept of time to my components. And I prefer to think of my components as parameters in components out, and as little time involved in that process as possible. But that's a personal decision and that definitely is up to you.

[00:12:42] There are certain things that you must use lifecycle methods for, like you can't get away from them, but sometimes you can minimize them.