title: componentDidMount multiple fetch calls best practice?
body: <p>I have a lot of apis that are INDEPENDENT of each other and needs to be stored in the React state before it is rendered. I have <code>fetch</code> calls in <code>componentDidMount</code> but I am not sure what is the best way to approach this.
  Should I...
  1. have nested fetch calls</p>
  
  <p>example:</p>
  
  <pre><code>componentDidMount() {
      fetch('url')
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
          // call another fetch in here
      })
  
  }
  </code></pre>
  
  <p>OR
  2. have separate fetch calls</p>
  
  <p>example:</p>
  
  <pre><code>componentDidMount() {
      fetch('url')
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
          // set state in here
      })
  
      // call another fetch for the other url endpoint
      fetch('url2')
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
          // set state in here
      })
  }
  </code></pre>
  
  <p>I'm not sure if one way is considered better practice over the other, but I would love to know what you guys think and what some of the pros/cons would be.</p>
  
  <p>UPDATE: I am using Promise.all() now, but I am getting the Promise returned rather than the actual value. Here is my code:</p>
  
  <pre><code>Promise.all([
    fetch(`/api/url1`),
    fetch(`/api/url2`),
  ])
  .then(([res1, res2]) =&gt; (
    {
      res1: res1.json(),
      res2: res2.json(),
  }))
  .then(({res1, res2}) =&gt; {
    this.setState({
      state1: res1,
      state2: res2,
    });
  })
  .catch((error) =&gt; {
    console.log(error);
  });
  </code></pre>
  
  <p>When i checked the values of my state on the console, here is what I get:</p>
  
  <pre><code>Promise
  __proto__: Promise
  [[PromiseStatus]]: "resolved"
  [[PromiseValue]]: Array(6530)
  </code></pre>
  
  <p>Any idea of what I may be missing / doing wrong?</p>
  
  <p>Thanks!</p>