Understand the React Component Lifecycle Methods

[00:00] When our component is added to the DOM, this is called "mounting," and when our component is removed from the DOM, this is called "unmounting." There are a handful of lifecycle methods we can access at various stages of this state.

[00:13] We're going to go ahead and get started creating a component. We're going to start off with a constructor. We're going to call super to get our context. We're going to set our state to equal a value of zero.

[00:28] We're also going to have an update method, I'm going to go ahead bind that up here, equals update.bind to a context of this. We'll go ahead and create that method right now. That's simply going to set our state val to this.state.val plus one. It's just going to increment that state.

[00:48] Set up our render method. Inside of this, we're going to cancel log render so we can see that happening in the browser. We're simply going to return a button. Its text content is going to be this state.val. We're going to add an on click to equal this.update. We're going to save that. Load it up here in the browser. We can see our render method fired off, and every time we click on it, our render method is fired again.

[01:19] The first lifecycle phase we can look at is component will mount. This is going to fire off right before it's actually mounted into the DOM, and it just lets us know that it's guaranteed to make it into the DOM. We haven't hit any errors. We're just going to come to log, component will mount.

[01:39] Again, we see our component will mount, and then, we see our render. When we click on this guy a bunch of times, our render continuously gets fired, but our component will mount has only fired once. It will only ever fire once.

[01:51] The next one we can look at is component did mount. This is going to fire off once our component has actually been mounted to the DOM. Here, we'll just log out. Component did mount. Save that.

[02:07] We see our component will mount. We see our render, and then, we see our component did mount. When we click on this guy again a bunch of times, render is going to continuously fire. Component did mount will only fire once. Just to keep these in order, I'm going to move this guy down here.

[02:21] The next one we'll look at is component will unmount. This is going to fire off when our component is about to leave the DOM. Here, we'll just log out. Component will unmount.

[02:33] Of course, we don't have anything in place right now to unmount this component, we're actually going to create a new component to work with that. We're going to call it "wrapper."

[02:41] We're going to return a few things in our JSX, we'll go ahead and close that off in parentheses. Wrap everything in a div. We're going to have a button. This one will be our mount button. We'll have another one down here for unmount.

[02:57] These are both going to be methods on our components, the on click of this guy is going to be this.mount.bind this. The on click of this one is going to be this.unmount, and again, we'll bind that to this. We'll go ahead and create those. Here's our mount method and our unmount method.

[03:23] On mount, we're actually going to use react DOM, I'm going to import that, react DOM from react DOM. We're going to call it react DOM.render. We're going to render our app component to a new div. We're going to call it A. That's going to live right here inside of our JSX.

[03:45] Now for our unmount, we're going to call react DOM.unmount component at node, and then, we simply pass in the same node where our component was mounted. In our default export, we're going to go ahead and export wrapper rather than app. Then wrapper will render app.

[04:07] Now if we click mount, we've mounted our app component. We can go ahead and click on that. We see our render running. When we unmount, we'll see our component will unmount is fired in our app component.