title: How do I stop a component rendering before data is fetched?
body: <p>Currently in react I have to functions in the componentDidMount lifecycle method in which call action creators to which fetch data. The component uses the data however, depending on how quick the response is determines if the data is there or not. How can i make it so the component doesn't render before data is inside it?</p>
  
  <pre><code>componentDidMount() {
      this.props.getTotalHours()
      this.props.getTrained()
    }
  </code></pre>
  
  <p>Render Function:</p>
  
  <pre><code>render() {
      let hours = parseInt(_.map(this.props.hours, 'hours'));
      let trained = _.map(this.props.trained, 'trained');
      return (
        &lt;div className="o-layout--center u-margin-top-large"&gt;
            &lt;div className="o-layout__item u-width-1/2@medium u-width-1/4@large"&gt;
              &lt;div style={{width: '80%', margin: '0 auto'}}&gt;
                &lt;PieChart data={hours} goal={100} label=' Training Hours Completed'/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Action Creator stores returned values from request in the application state:</p>
  
  <pre><code> export function getTotalHours() {
     const url = `${ROOT_URL}dashboard/hours`
     const request = axios.get(url)
     return {
       type: FETCH_HOURS,
       payload: request
     }
   }
  </code></pre>