title: How can I avoid an infinite recursion loop when calling an API endpoint using axios to update a component in React
body: <p>I'm building a react App to learn the basics and I'm stuck with the chart update after calling the API.</p>
  <p>The App I'm building has a weather API and makes call to that API endpoint to fetch data given a location and a time range (last 30 days, last 7 days, etc.)</p>
  <p>I have three components:</p>
  <ul>
  <li><strong>WeatherVisualization</strong> which is the Root component. It has state.</li>
  <li><strong>LocationSelector</strong> and TimeranteSelector, which render the select inputs and inform the root component of the selected option (by means of a callback passed in props). It is stateless</li>
  <li><strong>TemperatureChart</strong> which renders the chart. It is stateless since it recieves the data from the Root component.</li>
  </ul>
  <p>The following picture illustrates the description.</p>
  <p><a href="https://i.stack.imgur.com/ukFoY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukFoY.png" alt="enter image description here" /></a></p>
  <h4>The problem</h4>
  <p>When I click on any of the selectors, the state of WeatherVisualization is changed, thus the <strong>componentDidMount</strong> method is executed.</p>
  <p>There I make the API call, and when the date is ready is passed to the <strong>TemperatureChart</strong>. My problem is that, since I store the data in the state the componentDidMount in an infinite recursion loop.</p>
  <p>Here is the code for the componentDidUpdate method.</p>
  <pre class="lang-js prettyprint-override"><code>componentDidUpdate() {
          axios.get(`/weather/api/location/${this.state.location}/${this.state.timerangeId}/temperature/`).then((res) =&gt; {
                      this.setState({data: res.data});
                  }).catch((err) =&gt; console.log(err));
      }
  </code></pre>
  <p>How should I reachitecture my App? I found a bizarre working solution but I'm sure there is a more elegant one.</p>