React Component Lifecycle

In this section, we will discuss the lifecycle of React components.

The lifecycle of a component can be divided into three states:

• Mounting: Inserted into the real DOM
• Updating: Being re-rendered
• Unmounting: Removed from the real DOM

Mounting

When a component instance is created and inserted into the DOM, the following lifecycle methods are called in order:

• constructor(): Called before the React component is mounted.
• getDerivedStateFromProps(): Called right before calling the render method, both on the initial mount and on subsequent updates.
• render(): The method that must be implemented in a class component.
• componentDidMount(): Called immediately after a component is mounted (inserted into the DOM tree).

The render() method is the only one that must be implemented in a class component; other methods can be implemented as needed. Detailed explanations of these methods can be found in the official documentation.

Updating

A component updates whenever its state or props change.

The following lifecycle methods are called in order when a component's props or state change:

• getDerivedStateFromProps(): Called right before calling the render method, both on the initial mount and on subsequent updates. Determines if the component's output is affected by the current state or props changes based on the return value of shouldComponentUpdate().
• shouldComponentUpdate(): Called before rendering when new props or state are being received.
• render(): The method that must be implemented in a class component.
• getSnapshotBeforeUpdate(): Called right before the most recent render output is committed to the DOM.
• componentDidUpdate(): Called immediately after updating occurs.

The render() method is the only one that must be implemented in a class component; other methods can be implemented as needed. Detailed explanations of these methods can be found in the official documentation.

Unmounting

The following method is called when a component is removed from the DOM:

• componentWillUnmount(): Called immediately before a component is unmounted and destroyed.

Detailed explanations of these methods can be found in the official documentation.

Example

Here is an example of a current time display that updates every second:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, tutorialpro!</h1>
        <h2>The current time is: {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

In the following example, after the Hello component is loaded, a timer is set up using the componentDidMount method to reset the component's opacity every 100 milliseconds and re-render it:

class Hello extends React.Component {

  constructor(props) {
      super(props);
      this.state = {opacity: 1.0};
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      let opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }, 100);
  }

  render() {
    return (
      &lt;div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="world"/>,
  document.getElementById('root')
);

if (opacity < 0.1) {
  opacity = 1.0;
}
this.setState({
  opacity: opacity
});
}.bind(this), 100);
}

render() {
return (
  &lt;div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
  </div>
);
}
}

ReactDOM.render(
<Hello name="world"/>,
document.body
);

The following example initializes the state and updates it using setNewNumber. All lifecycle methods are in the Content component.

React Example

class Button extends React.Component {
constructor(props) {
    super(props);
    this.state = {data: 0};
    this.setNewNumber = this.setNewNumber.bind(this);
}

setNewNumber() {
  this.setState({data: this.state.data + 1})
}
render() {
    return (
       <div>
          &lt;button onClick = {this.setNewNumber}>INCREMENT</button>
          <Content myNumber = {this.state.data}></Content>
       </div>
    );
  }
}


class Content extends React.Component {
componentWillMount() {
    console.log('Component WILL MOUNT!')
}
componentDidMount() {
     console.log('Component DID MOUNT!')
}
componentWillReceiveProps(newProps) {
      console.log('Component WILL RECEIVE PROPS!')
}
shouldComponentUpdate(newProps, newState) {
      return true;
}
componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
}
componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
}
componentWillUnmount() {
       console.log('Component WILL UNMOUNT!')
}

  render() {
    return (
      <div>
        <h3>{this.props.myNumber}</h3>
      </div>
    );
  }
}
ReactDOM.render(
 <div>
    <Button />
 </div>,
document.getElementById('example')
);