title: Why ajax request should be done in componentDidMount in React components?
body: <p>React documentation states that ajax request should be initiated from  <code>componentDidMount</code> lifecycle event (see <a href="https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount" rel="noreferrer"> react docs</a>) .</p>
  
  <p>Why this event?</p>
  
  <p>In most cases, when loading data using ajax, I want to display some kind of loading bar, e.g.:</p>
  
  <pre><code>componentDidMount() {
     this.setState({isLoading: true});
     fetch(...)
        .then(...)
        .then(() =&gt; this.setState({isLoading: false})  
  }
  </code></pre>
  
  <p>but this fires <code>render</code> method 3 times (initial render immediatelly followed by setting <code>isLoading = true</code> and then by <code>isLoading = false</code></p>
  
  <p>What's wrong about sending ajax request from <code>componentWillMount</code> event?</p>