React Component Life Cycle

React Component life cycle can be represented with three states :

1. Mount
2. Update & Repeat
3. Unmount

1. Mount

    When component is initialized and rendered to the DOM for the first time, it is called component Mounting. 

In this process, class get instantiated, constructor is called, state is instantiated and component gets rendered.

componentDidMount() : Special method when component class wants to run some code when component mounts. 

When this method is called, UI has already rendered, so it can do any async ( call to service to get data ) call needed for component so that the component can be updated to the DOM.

2. Every time when set state ( setState() ) is called or new props is received this update life cycle is updated over and over. In this process the component gets re-rendered.  

3. Unmount

    When we want to stop rendering the component, we may want to remove DOM created for component, called Unmounting. In this process, you can clean up something need to cleaned before it disappears. 

componentWillUnmount() : Special method when component class wants to run the some code when component unmounts. 

Example of class based react component Clock:

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {

    return (

      <div>

        <h1>Hello, world!</h1>

        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>

      </div>

    );

  }

}

Reference : https://reactjs.org/docs/state-and-lifecycle.html