title: React - await until data fetches from API
body: <p>I am trying to fetch some JSON data and I have used async/await to hold the execution until data loading is ready. But React seems to completely ignore this and tries to render the component. I have written below simplified code to test this further and <code>setTimeout</code> is mimicking the API call delay.</p>
  
  <pre><code>console.log('global');
  var index ="Data not loaded";
  
  (async function fetchDataAsync(){
    console.log('async start');
  
    //mimcs loading data from API calls
    let promise = new Promise((resolve, reject) =&gt; {
      setTimeout(() =&gt; resolve("Data loaded!"), 1000)
    });
  
    var index = await promise;
    console.log('async end');
    console.log(index);
  })();
  
  class App extends React.Component {
    constructor(props){
      super(props);
      this.state={
        randomIndex:0
      }
      console.log('constructor');
    }
    render(){
      console.log('render');
      return (
        &lt;div &gt; 
          &lt;p&gt;{index}&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The output shows <em>Data not loaded</em> and console shows below</p>
  
  <p><em>global</em></p>
  
  <p><em>async start</em></p>
  
  <p><em>constructor</em></p>
  
  <p><em>render</em></p>
  
  <p><em>async end</em></p>
  
  <p><em>Data loaded!</em></p>
  
  <p>Is this how React supposed to work or am I missing something here? What would be the best place to put the API call so that it guarantees data will be loaded before the component mounts.
  Thanks</p>