title: Why is componentDidMount the best place to fire AJAX request
body: <p>A common use case is seen at lots of react projects that the AJAX request is  fired at <code>componentDidMount</code> hook.</p>
  
  <p>I just can't wrap my head around this proposed practice , let's say we have below component where the AJAX request depends on a <code>prop</code> from <code>parent component</code> and <code>MyComponent</code> won't get properly updated with correct ajax data if a second <strong>render action</strong> triggered from it's parent component(<strong>with new props</strong>) happen.but <code>componentDidMount</code> won't get executed anyway</p>
  
  <p>so I think this practice is gonna cause issue , can anyone help confirm it and justify it? or correct me if I'm wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class MyComponent extends Component {
    constructor() {
      super(...arguments);
    }
    
    async componentDidMount() {
      const data = await fireAjax(this.props.id);
      this.setState({data});
    }
  
    render() {
      const { data } = this.state;
      return (
          { data &amp;&amp; &lt;span&gt;{data}&lt;/span&gt; }
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>