title: React lifecycle methods: fetch in componentDidMount
body: <p>I'm trying to do a simple fetch through the <code>componentDidMount</code> lifecycle method. However, the result does not appear on the page as it should unless I have a one second timeout. I've gathered it's due to the async nature of the fetch, but how can I fix that without having to use <code>setTimeout</code>? Would <code>componentDidUpdate</code> work/how would you use it?</p>
  
  <pre><code>      constructor(props) {
          super(props);
          this.state = { value: '' };
          this.getValue= this.getValue.bind(this);
        }
  
          getValue() {
              return (
                  fetch(url, {
                      method: 'GET',
                  }).then(response =&gt; {
                      if (response.status &gt;= 400) {
                          throw new Error('no response: throw');
                      }
                      return response.json()
                  }).then(response =&gt; {
                      this.setState({value: response});
                  }).catch((error) =&gt; {
                      this.setState({
                          value: 'no response: catch'
                      })
                  })
              );
          }
  
  
      componentDidMount(){
          //this.getValue(); //does not work
          setTimeout(() =&gt; this.getValue(), 1000); //this works &amp; populates page
      }
  
  
      render() {
              return (
                    &lt;div&gt;
                       &lt;div&gt;{this.state.value}&lt;/div&gt;
                    &lt;/div&gt;
              )
      }
  </code></pre>