Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1011 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Understand the React Component Lifecycle Methods

4:19 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

Avatar
Joris

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!

Avatar
Joseph

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

In reply to Joris
Avatar
Ashlyn Baum

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?

Avatar
Joseph

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.

In reply to Ashlyn Baum
Avatar
Anett_Soos

I used {this.mount} instead of {this.mount.bind(this)} as an event on the Wrapper button. It still worked. Should I be using 'bind'?

In reply to egghead.io

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.

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 val: zero.

App.js

import React from 'react';

class App extends React.Component {
  constructor() {
    super();
    this.state = {val: 0}
    this.update = this.update.bind(this)
  }
  update(){
    this.setState({val: this.state.val + 1})
  }
}
export default App

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 + 1. It's just going to increment that state.

Set up our render method. Inside of this, we're going to console.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 onClick 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.

render(){
  console.log('render');
  return <button onClick={this.update}>{this.state.val}</button>
}

The first lifecycle phase we can look at is componentWillMount. 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 console.log, componentWillMount.

componentWillMount(){
  console.log('componentWillMount')
}

Again, we see our componentWillMount, and then, we see our render. When we click on this guy a bunch of times, our render continuously gets fired, but our componentWillMount has only fired once. It will only ever fire once.

The next one we can look at is componentDidMount. This is going to fire off once our component has actually been mounted to the DOM. Here, we'll just log out. componentDidMount. Save that.

componentDidMount(){
  console.log('componentDidMount')
}

We see our componentWillMount. We see our render, and then, we see our componentDidMount. When we click on this guy again a bunch of times, render is going to continuously fire. ComponentDidMount will only fire once. Just to keep these in order, I'm going to move this guy down here.

The next one we'll look at is componentWillUnmount. This is going to fire off when our component is about to leave the DOM. Here, we'll just log out. componentWillUnmount.

componentWillUnmount(){
  console.log('componentWillUnmount')
}

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.

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.

class Wrapper extends React.Component {
  render(){
    return (
      <div>
        <button>Mount</button>
        <button>UnMount</button>
      </div>
    )
  }
}

These are both going to be methods on our components, the onClick of this guy is going to be this.mount.bind(this). The onClick 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.

<div>
  <button onClick={this.mount.bind(this)}>Mount</button>
  <button onClick={this.unmount.bind(this)}>UnMount</button>
  <div id="a"></div>
</div>

On mount, we're actually going to use ReactDOM, I'm going to import that, ReactDOM from react-dom. We're going to call it ReactDOM.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.

mount(){
  ReactDOM.render(<App />, document.getElementById('a'))
}

Now for our unmount, we're going to call ReactDOM.unmountComponentAtNode, 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.

unmount(){
  ReactDOM.unmountComponentAtNode(document.getElementById('a'))
}

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 componentWillUnmount is fired in our App component.

The lifecycles



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?