Understand the React Component Lifecycle Methods
React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.
[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.
In this case setProps and setState are interchangeable since there is only one component representing the entire example. This is seldom the case in a real world application. There are tests (http://jsperf.com/reactjs-setstate-vs-setprops ) that present setState as the faster option.
It is best to think of props as options or configuration that are sent to your component and state as internal or private variables. The ideal situation is to only have state in the Owner of a group of components. See: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
I'm a bit confused about how the component's methods componentWillMount, componentDidMount, and componentWillUnmount are initially fired when loading the page. Are all the methods in the class automatically called synchronously on load?
These specific methods are inherited from React.Component and executed automatically. componentWillMount then render then componentDidMount. componentWillMount and componentDidMount will never be called again. componentWillUnmount is executed when the component is removed from the DOM. Adding the component back to the DOM will restart the mounting lifecycle phases.
The only component we are explicitly rendering is App in index.js
I don't understand why does just export default Wrapper make the wrapper render?
@Robinson, Yes we have to change <App> to <Wrapper> in index.js may be he missed that part
What code editor is using?
Great overview of mount and unmount. However, after watching previous videos I don't understand the use of props here. Since val gets updated, shouldn't it be state? When do you use props vs state? Thanks!