React Component Lifecycle - componentDidMount

The componentDidMount life-cycle method is the last life cycle method executed in the component mounting phase. componentDidMount() is invoked immediately after the component is mounted.

Any initialization to the component which requires the DOM nodes should be done in this method. In this method we can perform activities which require DOM layout like measuring DOM element size etc. We can also alter the state based on the DOM element / layout.

Another commonly performed activity in componentDidMount() is making Api/Ajax calls to get remote data. We can make api calls and based on the data returned from the API we can set the state using setState().

We can call setState() in the componentDidMount life-cycle method, this will re-trigger the render() method but the browser will not refresh. Even though the render() method is called twice react makes sure that the output is rendered to the browser only once.

  componentDidMount(){
    // Perform Api/Ajax calls, DOM element evaluations and setState() here, will re-trigger render()
  }