componentDidMount

As the name suggests, after all the elements of the page is rendered correctly, this method is called. After the markup is set on the page, this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX elements.

componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX. For example, we are going to fetch any data from an API then API call should be placed in this lifecycle method, and then we get the response, we can call the setState() method and render the element with updated data.

import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: 'Jordan Belfort'
    }
  }
  getData(){
    setTimeout(() => {
      console.log('Our data is fetched');
      this.setState({
        data: 'Hello WallStreet'
      })
    }, 1000)
  }
  componentDidMount(){
    this.getData();
  }
  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;

If you see an above example, then I have simulated an API call with setTimeOut function and fetch the data. So, after the component is rendered correctly, componentDidMount() function is called and that call getData() function.

Lets understand WillMount and DidMount Together

understanding difference between componentDidMount() and componentWillMount() methods. Now that I understand the difference, here is for anyone need little more clarity on these two methods:componentWillMount() v/s componenetDidMount() — React

Use-case for the componentWillMount()

For example, if you want to keep the date of when the component was created in your component state, you could set this up in this method. Please keep in mind that setting state in this method won’t re-render DOM. This is important to keep in mind, because in most cases whenever we change the component’s state, a re-render is triggered.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Use-case for the componentDidMount()

For example, if you were building a news app that fetches data on the current news and displays it to the user and you may want this data to be updated every hour without the user having to refresh the page.

import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: 'Jordan Belfort'
    }
  }
  getData(){
    setTimeout(() => {
      console.log('Our data is fetched');
      this.setState({
        data: 'Hello WallStreet'
      })
    }, 1000)
  }
 componentDidMount() {
    this.interval = setInterval(this.getData, 3600000);
  }
  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;

Reference - https://medium.com/coffee-and-codes/componentdidmount-v-s-componnetwillmount-react-47f4f631276c