Check out a free preview of the full Complete Intro to React v4 course:
The "Lifecycle Methods" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian takes a tour through the lifecycle methods available on a component. The most common methods you'll be using is componentDidMount and getDerivedStateFromProps.

Get Unlimited Access Now

Transcript from the "Lifecycle Methods" Lesson

[00:00:00]
>> Brian Holt: So that should component update. That's for performance optimizations. There are a bunch of others. Let's just go see reactjs.org. And if we go into the Docs, Main Concepts, State and Lifecycle.
>> Brian Holt: Adding, where is it?
>> Brian Holt: There are a bunch of these for lifecycle methods.
>> Brian Holt: API reference, that's what I wanted.

[00:00:43]
>> Brian Holt: So there's a bunch of these, getDerivedStateFromProps() we chatted about, component should update, we just talked about that one. getSnapshotBeforeUpdate(), that one's new. I'd have to go remember what it actually does.
>> Brian Holt: In any case, I've never had use before, so check that out. It's basically I think before things update that it'll give you the previous props and previous states to do various manipulations with.

[00:01:22]
>> Brian Holt: Yeah, you can see here there's a bunch, but 99% of the time, the one that you want to use is componentDidMount(), that is the most useful one. DerivedStateFromProps can be useful. There's two of these. They used to just be called like component will update and component will receive props like if you're gonna get new props, it'll call component will receive props.

[00:01:43] This is now called unsafe because of the asynchronous nature that they've moved from, React 15 was totally synchronous all the time. There's no async abilities whatsoever. React 16 actually added some new async abilities to React. So you can do things like suspend rendering and resume rendering, which that API is not stable yet or else I would show you.

[00:02:06] I will probably be back here in six months to tell you about it when it does finally land because it's going to really change how you write React. So that's why these are unsafe now is cuz they're unsafe across async boundaries. So don't use the unsafe ones if you can avoid it.

[00:02:21] But this will get called right before the component updates and this will get called right before it gets new props. For the most part, they will receive props. You can do the getDerivedStateFromProps. You would use those generally for the same thing. And component will update is called right before, so the component updates, so you can do any sort of, maybe, library interaction and stuff kind of like that.

[00:02:44] I think that's what get snapshot before update is for, is so you can do what component will update used to be for. And lastly, component will unmount. We talked about that. That's for cleaning up your mess. We talked in passing about ComponentDidCatch. This is so you can catch errors and maybe you can send things off to track.js, or some sort of error tracking service, or century, or whatever you're using to aggregate your logs.

[00:03:10] That can be done in ComponentDidCatch and so you can fail gracefully. Your components really shouldn't be throwing too many errors I hope, but that's what that's for. And we didn't talk about force update, so force update basically says like, hey React, I know that you didn't have an event that makes you update, but I want you to force an update right now.

[00:03:35] You should never call it. If you're doing something with force update, you're probably doing something wrong. The only case that I can think of is, again, if you're integrating with some third party library, right? That some event is happening outside of React and you need to reach back and react.

[00:03:52] I know you don't know something updated, but it did. For example, React Redux, the library that connects React and Redux, calls for sub data underneath the hood to flip. It's like, hey, stuff happened, I need you to re-render. So it's usually libraries that will call for a forced update.