title: React - Loading Stored Data then API data in ComponentWillReceiveProps
body: <p>I have a component that must make an HTTP request based off new props.  Currently it's taking a while to actually update, so we've implemented a local store that we'd like to use to show data from past requests and then show the HTTP results once they actually arrive.</p>
  
  <p>I'm running into issues with this strategy:</p>
  
  <pre><code>componentWillRecieveProps(nextProps){
    this.setState({data:this.getDataFromLocalStore(nextProps.dataToGet)});
    this.setState({data:this.makeHttpRequest(nextProps.dataToGet)});
    //triggers single render, only after request gets back
  }
  </code></pre>
  
  <p>What I think is happening is that react bundles all the setstates for each lifecycle method, so it's not triggering render until the request actually comes back.</p>
  
  <p>My next strategy was this:</p>
  
  <pre><code>componentWillRecieveProps(nextProps){
    this.setState({data:this.getDataFromLocalStore(nextProps.dataToGet)});
    this.go=true;
  }
  componentDidUpdate(){
    if(this.go){
      this.setState({data:this.makeHttpRequest(this.props.dataToGet)});
    }
    this.go=false;
  }
  //triggers two renders, but only draws 2nd, after request gets back
  </code></pre>
  
  <p>This one SHOULD work, it's actually calling render with the localstore data immediately, and then calling it again when the request gets back with the request data, but the first render isnt actually drawing anything to the screen!</p>
  
  <p>It looks like react waits to draw the real dom until after componentDidUpdate completes, which tbh, seems completely against the point to me.</p>
  
  <p>Is there a much better strategy that I could be using to achieve this?</p>
  
  <p>Thanks!</p>