Transcript from the "React Lifecycle Methods" Lesson
>> Brian Holt: And now we're gonna do Ajax. So remarkably, we haven't actually had to use lifecycle methods yet. Which is crazy because they're actually fairly common when you're writing React. But we have not actually had to use them yet. So we're going to introduce something now so that you can see what these lifecycle methods are.
[00:00:19] So going back to our code, let's look at something like ShowCard, it's a pretty simple one. No, let's look at Search.
>> Brian Holt: So you have to think of the lifecycle of the component as it lives on the DOM, right? The first thing that happens to it, is it calls its constructor, inevitably, that's how ES6 classes work.
[00:00:43] Right, then after that it's gonna get it's own default props. And then right before it gets mounted to the DOM, it's gonna call a method called component will mount. So actually what I would do here is, I think it goes here, so it's component will mount. You don't have to copy this, I'm just gonna show you.
>> Brian Holt: So this here is a method that's specific to React, that this is going to get called right before react renders it out to the DOM, right? So it's called render for the frist time already, so it actually has the first amount of markup. And then it's about to be mounted to the dom.
[00:01:21] It's gonna call this componentWillMount method. And to be honest with you, you're not gonna use componentWillMount very much. But one of the things that it is useful for and is important, is if you have something that needs to happen both on the service side, if you're doing service-side rendering, and the client side.
[00:01:40] So that's the key about componentWillMount, is that it does get called on the server. The one that you're gonna end up using more is componentDidMount, right? So this is going to get called after it's been rendered out to the DOM for the very first time. Now, what's peculiar and good about componentDidMount is you can be guaranteed that Window is available at this point, right?
[00:02:04] Because it's already been rendered and it's not going to get called a node, right? So anything that you wanna do with window or anything you wanna do with like doing Ajax request, are gonna go to componentDidMount. Thus you are gonna use componentDidMount quite a bit. A good example, so besides Ajax and beside anything that references window or document, another good thing you are gonna do in windows componentDidMount.
[00:02:26] Is if you need to integrate with another library. So an example of that would be D3, right? Say you'd have a React component that renders out a chart with D3. You would do all of that stuff here in componentDidMount to do that integration level with it.
>> Brian Holt: If you need to add any event listeners on the window, that's when you would do this as well.
[00:02:48] So yes, we're gonna be using componentDidMount quite a bit.
>> Brian Holt: There's a couple other of them. I have them documented out here in my notes if you wanna go and read them, and they're also really well documented in the React documentation. There's componentWillReceiveProps. That's gonna get called every time that you're gonna get brand new props from the parent.
[00:03:09] There's ShouldComponentUpdate which we've actually will use later. It's a performance optimization method which typically you don't have to worry about. Reactors plenty performed it by itself, but sometimes you have performance problems and this is kind of the escape hatch for that. And then the last one is componentWillUnmount.
>> Brian Holt: Like that, I think.
>> Brian Holt: This is before the component is about the leave the DOM, and typically this is gonna be where you clean up, right? If you added any event listeners, if you need to like detach from D3 or anything like that, all that kind of clean up stuff will happen here.
[00:03:50] Again, not something that you're typically going to need to do, but it's available there for you should you need it.
>> Brian Holt: And that's really it. So, it's just a bunch of hooks that you can hook into the lifecycle of these components to kind of do different things depending on what you need to do.