title: ComponentDidUpdate usage and Maximum update depth exceeded
body: <p>I have a setting screen where I get number of info from user such as age, weight and gender and after this info I am calculating how much water user should drink per day.</p>
  
  <p>I would like to calculate this amount automatically without any need of calculate button. </p>
  
  <blockquote>
    <p>Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.</p>
  </blockquote>
  
  <p>My current code to calculate water amount</p>
  
  <pre><code>  //function to calculate how much water to drink
    waterCalculator = () =&gt; {
      //let weightPound = this.state.weight * 2.2046;
      let weightValue = this.state.weight;
      let ageValue = this.state.age;
      let waterAmount = null;
      if (ageValue &lt; 30) {
        waterAmount = weightValue * 40;
      } else if (ageValue &gt;= 30 || ageValue &lt;= 55) {
        waterAmount = weightValue * 35;
      } else {
        waterAmount = weightValue * 30;
      }
      this.setState({ sliderValue: waterAmount });
    };
  </code></pre>
  
  <p>This how I want to automatically update my water amount</p>
  
  <pre><code>  //checking if age and weight and gender states are changed call the function
     componentDidUpdate(prevState) {
       if (
         this.state.age !== prevState.age &amp;&amp;
         this.state.weight !== prevState.weight &amp;&amp;
         this.state.gender !== prevState.gender
       ) {
         this.waterCalculator();
       }
     }
  </code></pre>