title: react update forever loop componentDidUpdate
body: <p>According to the documentation:</p>
  
  <blockquote>
    <p>Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).</p>
  </blockquote>
  
  <pre><code>componentDidUpdate(prevProps) {
    // Typical usage (don't forget to compare props):
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }
  </code></pre>
  
  <p>Now my method looks like this:</p>
  
  <pre><code>componentDidUpdate(prevProps) {
      console.log("Fitting update");
      this.getDataBasedOnMessurements();
  }
  
  getDataBasedOnMessurements() {
      fetch(process.env.REACT_APP_API_URL + 'configurator/getFittingData', {
          method: 'PUT',
          body: JSON.stringify(this.props.messurements)
      }).then((response) =&gt; {
          return response.json();
      }).then((myJson) =&gt; {
          this.setState({data: myJson.fittingExtra})
      });
  };
  </code></pre>
  
  <p>The problem with this is that since the state is being updated the <code>ComponentDidUpdate</code> is now in a forever loop
  <a href="https://i.stack.imgur.com/XQihd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQihd.png" alt="enter image description here"></a></p>
  
  <p>So what is the right way of calling an API and updating the state when the props on the component is being updated?</p>