title: render seems to be triggering before componentDidMount (async/await used)
body: <p>my problem does have a workaround, but I am interested in the underlying problem. </p>
  
  <p>In my component AuthorProfile, I am using async/await to fetch data, then setting my state with the fetched data, and using console log in render() to see what is going on, here is my component without the render function:</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.state = { displayData: [] };
    }
    async componentDidMount() {
      await this.props.getRoadmapByUser({
        user_id: this.props.location.pathname.slice(9)
      });
      this.setState({
        displayData: this.props.auth.other_author_created_roadmaps
      });
  
    }
  </code></pre>
  
  <p>In render I have <code>return(blah blah blah... {console.log(this.state.displayData)}</code>,<strong>when I load my page, my console will always print blank lines for like 2 times (since that was my displayData state at first), and then starts logging the fetched data</strong>. That shouldn't be the case, I used async/await. My quick workaround is simple for my application, I am trying to display a list which will use .map, I inititaed displayData to an empty array so that even if there is no data .map wouldn't call any errors. </p>
  
  <p>Here is my code on how I fetched the data: 
  In componentDidMount of my component "AuthorProfile":</p>
  
  <pre><code> async componentDidMount() {
      await this.props.getRoadmapByUser({
        user_id: this.props.location.pathname.slice(9)
      });
    }
  </code></pre>
  
  <p>This will trigger a redux action getRoadmapByUser which looks like: </p>
  
  <pre><code> export const getRoadmapByUser = id =&gt; dispatch =&gt; {
     return axios
      .post("/api/users/getroadmapbyuser", id)
      .then(res =&gt; dispatch({ type: GET_ROADMAPS_BY_USER, payload: res.data }));
  };
  </code></pre>
  
  <p>This makes an api call and then uses the data retrieved from the api call to do a dispatch, here is the post /api/users/getroadmapbyuser call: </p>
  
  <pre><code>router.post("/getroadmapbyuser", (req, res) =&gt; {
    User.findOne({ _id: req.body.user_id }).then(user =&gt;
      res.json(user.createdRoadmap)
    );
  });
  </code></pre>
  
  <p>This will return a field in my database, now I am going to update my redux state with the .then(res => dispatch.....,) the dispatch looks like this: </p>
  
  <pre><code> case GET_ROADMAPS_BY_USER:
    return {
      ...state,
      other_author_created_roadmaps: action.payload
    };
  </code></pre>
  
  <p>I will at last use this other_author_created roadmaps data and set my displayData equal to it. </p>