title: Why componentWillMount is called after rendering?
body: <p>I am working with React and I am trying to understand the lifecycle. I am doing a <code>componentWillMount</code> method in order to get the <code>props</code> I need before the render occurs. I need to know how to update the state when the view loads.</p>
  
  <p>All I am trying to do is a <code>GET</code> request in order to get a list of dealers for a Casino Game. Basically, I am missing 1 or 2 steps which are for render the dealers's list in the DOM</p>
  
  <p>I will show what I am doing with my code and after that I will explain what I want</p>
  
  <p>Actions part</p>
  
  <p><strong>getDealerActions.js</strong></p>
  
  <pre><code>class GetDealersActions {
  
    constructor () {
      this.generateActions('dealerDataSuccess', 'dealerDataFail');
    }
  
    getDealers (data) {
      const that = this;
      that.dispatch();
      axios.get('someroute/get-dealers/get-dealers')
        .then(function success (response) {
          that.actions.dealerDataSuccess({...response.data});
        })
    }
  };
  </code></pre>
  
  <p>then we move to the stores</p>
  
  <p><strong>getDealersStore.js</strong></p>
  
  <pre><code>class GetDealersStore {
  
    constructor () {
      this.state = {
        dealerData : null,
      };
    }
  
    @bind(GetDealersActions.dealerDataSuccess)
    dealerDataSuccess (data) {
      this.setState({
        dealerData : data,
      });
     console.log(this.state.dealerData);
    }
  }
  </code></pre>
  
  <p>in this case that <code>console.log(this.state.dealerData);</code> returns something like this which is exactly what I need</p>
  
  <pre><code>Object {dealersData: Array[3]}
  </code></pre>
  
  <p>the problems comes in the component part, honestly because I don't know how to handle the data here</p>
  
  <pre><code>@connectToStores
  export default class Dealers extends Component {
  
    static contextTypes = {
      router : React.PropTypes.func,
    }
  
    constructor (props) {
      super(props);
      this.state = {}
    }
  
    static getStores () {
      return [ GetDealersStore ];
    }
  
    static getPropsFromStores () {
      return GetDealersStore.getState();
    }
  
    componentWillMount () {
      console.log('@@@', this.props);
      GetDealersActions.getDealers();
    }
  
    render () {
      console.log('&gt;&gt;&gt;', this.props);
      let content;
      if (this.state.dealerData) {
        content = this.state.dealerData.map((item) =&gt; {
          return &lt;div key={item.CardId}&gt;{item}&lt;/div&gt;;
        });
      } else {
        content = &lt;div&gt;Loading . . .&lt;/div&gt;;
      }
  
      return (
        &lt;div&gt;
          &lt;div&gt;{content}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>all I get here <code>&lt;div&gt;{content}&lt;/div&gt;</code> is <code>Loading . . .</code> because <code>this.state</code> is coming like this <code>Object {}</code> </p>
  
  <p>A weird situation I am getting here, is that this view is rendering twice, the 1st time is rendering, and the <code>console.log('&gt;&gt;&gt;', this.props);</code> returns this <code>&gt;&gt;&gt; Object {params: Object, query: Object}</code> and the second time it renders, fires this <code>&gt;&gt;&gt; Object {params: Object, query: Object, dealerData: Object}</code> which is what I need. </p>
  
  <p>So, why <code>componentWillMount</code> is waiting the render method in order to get fired ?</p>