title: How can I prevent a component from rendering before data is loaded?
body: <p>I am waiting the props to come up from a store named <code>GetDealersStore</code>, and the way I am fetching that data is with an action where I am doing this:</p>
  
  <pre><code>  componentWillMount () { GetDealersActions.getDealers(); }
  </code></pre>
  
  <p>I already test the app and <code>componentWillMount()</code> is running before the initial render where I have this</p>
  
  <pre><code>let dealerInfo;
  if (this.state.dealerData) {
    dealerInfo = this.state.dealerData.dealersData.map((dealer) =&gt; {
      return (&lt;div&gt;CONTENT&lt;/div&gt;);
    })
  } else {
    dealerInfo = &lt;p&gt;Loading . . .&lt;/p&gt;
  }
  </code></pre>
  
  <p>but for the first second you can see <code>&lt;p&gt;Loading . . .&lt;/p&gt;</code> in the screen which is the <code>else</code> in the conditional above, and then the rest of the render comes up with <code>return (&lt;div&gt;CONTENT&lt;/div&gt;);</code> which is the <code>if</code> in the conditional. So, I guess, this means that the render method has been trigger twice because it keeps waiting for the data coming from the database. </p>
  
  <p>The data from the database is not available at the time of the 1st render, so, how can I fetch that data before the 1st initial render occurs? </p>