React.js Lifecycle Events

react-lifecycle.js

  // Invoked once before first render
  componentWillMount() {
    console.log('componentWillMount');
    // Calling setState here does not cause a re-render
  }
  
 // Invoked once after the first render
  componentDidMount(){
    console.log('componentDidMount');
  }

  // Invoked whenever there is a prop change
  // Called BEFORE render
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
    // Not called for the initial render
    // Previous props can be accessed by this.props
    // Calling setState here does not trigger an an additional re-render
  }

  // Determines if the render method should run in the subsequent step
  // Called BEFORE a render
  // Not called for the initial render
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate');
    // If you want the render method to execute in the next step
    // return true, else return false
    return true;
  }

  // Called IMMEDIATELY BEFORE a render
  componentWillUpdate() {
    console.log('componentWillUpdate');
    // You cannot use this.setState() in this method
  }

  // Called IMMEDIATELY AFTER a render
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  // Called IMMEDIATELY before a component is unmounted
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }