title: Asynchronous data loading
body: <p>I am downloading data from the API and writing to <code>state</code> <code>(posts)</code></p>
  
  <p>Condition after <code>let res = await response.json();</code> will be done earlier than this function</p>
  
  <p>At what point should he perform <code>this.setState({posts: res})</code>?</p>
  
  <p>At the moment it is inappropriate because:</p>
  
  <ul>
  <li>I am getting a large object from the bugs with nested lists of objects</li>
  <li>to call <code>render()</code> an object must already exist in <code>state</code></li>
  <li>I can not define an empty object in the <code>state</code> because it is too complicated</li>
  </ul>
  
  <p>Function:</p>
  
  <pre><code>async loadData()
  {
      try
      {
          this.setState({ loading: true});
  
          let response = await fetch('http://localhost:5000/api/posts/', {
              method: 'GET',
              headers:
              {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              }
          });
  
          let res = await response.json();
  
          if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300)
          {
              console.log(res);
  
              this.setState({ posts: res});
              this.setState({ loading: false});
          }
          else
          {
              let error = res;
              throw error;
          }
  
      }
      catch (error)
      {
          console.log('error' + error)
      }
  }
  </code></pre>