title: Why does my component render before setState?
body: <p>EDIT - Added <code>render</code> function</p>
  <p>I've been fighting with this for weeks now. I want to create two lists that are displayed in a dashboard, both using data from an API. If I create a const with dummy data, the lists are displayed as required. However, when I try to use the same code to display information coming from my API, I get one list displayed before I have set the state condition calling for the render. At one point I didn't get either list displaying so I'm overjoyed to be making some progress at least. If anyone can assist with pointing out what I'm doing wrong, I would be very grateful!</p>
  <pre><code>async componentDidMount() {
      let data = {
        firstName: sessionStorage.getItem('cwsFirstName'),
        surname: sessionStorage.getItem('cwsSurname'),
        email: sessionStorage.getItem('cwsUser'),
        role: sessionStorage.getItem('cwsRole'),
        type: sessionStorage.getItem('cwsType'),
        storeId: sessionStorage.getItem('cwsStoreId'),
        clientId: sessionStorage.getItem('cwsClient')
      };
  
      let user = [];
      user.push(data);
      await this.setState({ user: user });
      const client = data.clientId;
  
      // start with extracting the services from the db
      const clientservices = await this.mysqlLayer.Get(`/admin/clientservices/${client}`);
      //console.log('clientservices: ', clientservices);
  
      let workzones = [
        {
          worklist: 'Queues',
          task: 'list_all'
        },
        {
          worklist: 'Today',
          task: 'list_today'
        }
      ];
  
      // loop through services to populate worklists
      let loopCount = 0;
      clientservices.forEach(async service =&gt; {
        let workspace = service.service;
        let type = service.type;
  
        let workspaces = [];
  
        // loop through the workzones
        workzones.forEach(async workzone =&gt; {
          //console.log('workzone: ', workzone);
          let worklists = [];
          let task = workzone.task;
          let records = await this.mysqlLayer.Get(`/${type}/${workspace}/${task}/${client}`);
          //console.log('records: ', records);
  
          let statusArr = [];
          records.forEach(async record =&gt; {
            //console.log('currentStatus: ', record.currentStatus);
            statusArr.push(record.currentStatus);
          });
  
          let completeWorklist = statusArr.filter(this.onlyUnique);
  
          let statusList = [];
          if (completeWorklist.length &gt; 0) statusList = this.filterWorklists(workspace, completeWorklist);
  
          let items = [];
          statusList.forEach(async element =&gt; {
            //console.log('element: ', element);
            let count = 0;
            records.forEach(async record =&gt; {
              if (record.currentStatus === element) {
                ++count;
              }
            });
            items.push({
              item: element,
              count: count
            });
            //console.log('items: ', items);
          }); // end of worklist loop *******************************
  
          worklists.push({
            worklist: workzone.worklist,
            items: items
          });
          //console.log('worklists: ', workzone, worklists, moment(new Date()).format('HH:mm:sss'));
          //console.log('worklists: ', workzone, worklists, moment(new Date()).milliseconds());
  
          await this.setState({
            records: records,
            type: type,
            worklists: [...this.state.worklists, ...worklists]
          });
  
          ++loopCount;
          console.log('loopCount: ', loopCount);
  
          //console.log('this.state.worklists: ', this.state.worklists, moment(new Date()).milliseconds());
          let tempWorklists = this.state.worklists;
          //console.log('tempWorklists: ', tempWorklists, moment(new Date()).milliseconds());
  
          workspaces.push({
            workspace: workspace,
            worklists: tempWorklists
          });
  
  
        }); // end of workzone loop *******************************
  
  
        //console.log('2 workspaces: ', workspaces);
  
        await this.setState({
          //loading: false,
          //workspaces: [...this.state.workspaces, ...workspaces]
          workspaces: workspaces
          //workspaces: workspacesConst
        });
        //console.log('this.state.workspaces: ', this.state.workspaces, moment(new Date()).milliseconds());
  
        await this.setState({
          //loading: false,
          //workspaces: [...this.state.workspaces, ...workspaces]
          workspaces: workspaces
          //workspaces: workspacesConst
        });
        //console.log('this.state.workspaces: ', this.state.workspaces, moment(new Date()).milliseconds());
  
      }); // end of workspace loop *******************************
  
      // Should be good to render now
      //if (this.state.worklists.length &gt; 1)
      await this.setState({ loading: false });
      //this.forceUpate();
  
    }
  
  render() {
  
      if (this.state.loading) {
        return (
          &lt;div&gt;Loading...&lt;/div&gt;
        );
      } else {
  
        const workspace = this.state.workspaces.map((workspace, idx) =&gt;
        //const workspace = workspaces.map((workspace, idx) =&gt;
          &lt;div key={idx} className=&quot;card border-light mb-3&quot; style={{padding: &quot;20px&quot;}}&gt;
            {console.log('render workspace: ', workspace.worklists, moment(new Date()).milliseconds())}
            &lt;Workspace
              key={idx}
              records={this.state.records}
              workspaces={workspace}
              type={this.state.type}
              user={this.state.user}
            /&gt;
          &lt;/div&gt;
        );
  
        return (
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;cols-12&quot;&gt;
              &lt;Welcome user={this.state.user}/&gt;
              {workspace}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Tlama.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tlama.png" alt="Render console log" /></a>
  As you can see, the render happens before <code>this.state.loading</code> is set to 'false'. Surely it should only render after that?</p>