title: Handle infinite loop in componentDidUpdate
body: <p>I am using a simple form with a text input. When something is written the state of the component is updated, and as <code>this.setState</code> is asynchronous, I fetch the data from the API on <code>componentDidUpdate</code>. </p>
  
  <p>The problem is that I don't find the solution to avoid the infinite loop, as I update the state after using axios:</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        searchValue: "",
        data: null,
      };
      this.handleInputChange = this.handleInputChange.bind(this);
    }
  
  handleInputChange(event) {
      this.setState({ searchValue: event.target.value });
  }
  
  componentDidUpdate() {
      const url = 'https://www.google.com/?search=' + this.state.searchValue;
      axios.get(url).then(response =&gt; this.setState({data: response.data}));
  }
  </code></pre>