title: flickering doing setState using nested api calls in react
body: <p>I want to load a bunch of data that involves multiple APIs, I did setState in foreach, it worked but I think the design is wrong, as I see flickering on my screen. </p>
  
  <pre><code>API.fetchMain().then(main =&gt; {
    main.forEach(o =&gt; {
      const main_id = o.main_id
  
      this.setState({
        main: o
      })
  
        API.fetchSub(main_id)
        .then(sub =&gt; {
  
          this.setState({
            sub
          })
  
          API.fetchOthers(main_id, sub.id)
          .then(others =&gt; {
            this.setState({
              others
            })
          })
  
        })
    })
  }
  </code></pre>
  
  <p>I think I should use promises to refactor, I tried but I think my design was wrong.</p>
  
  <pre><code>API.fetchMain().then(main =&gt; {
  
    let promise = []
  
    main.forEach(o =&gt; {
      const main_id = o.main_id
  
      this.setState({
        main: o
      })
  
      promise.push(
        API.fetchSub(main_id)
        .then(sub =&gt; {
  
          return API.fetchOthers(main_id, sub.id)
  
        })
      )
    })
  
    Promise.all(promise).then(resp =&gt; console.log('do setState here'))
  
  }
  </code></pre>
  
  <p>Need help.</p>