title: How to perform child component validation without infinite loop in react.js
body: <p>I have really simple example in react. Parent component pass data to the child component throug <code>props</code>. Inside child component i can change this data, also new data can be passed to the child component from the parent at any time. Also on the parent i have save button. After pressing it i should show validation message if some validations did not pass. 
  I have implemented it in such a way. From parent i pass callback to notify parent that validity of the data has changed. Inside child i perform validation in three places:</p>
  
  <ul>
  <li><code>componentDidMount</code> - to validate initial data</li>
  <li><code>componentWillReceiveProps</code> - to validate data that can be passed from the parent</li>
  <li><code>onChange</code> to validate entered data
  Any time child perform validation of data i call callback to inform parent about validity. The problem is in <code>componentWillReceiveProps</code>. With setState in parent this part causes infinite loop - see picture below.
  <a href="https://i.stack.imgur.com/CCruc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CCruc.jpg" alt="enter image description here"></a>
  Please check <a href="https://jsfiddle.net/t5tdqefx/3/" rel="nofollow noreferrer">jsfiddle</a> Here in console you can see that i restricted infinite loop to 10 iterations to prevent you browser from crash.</li>
  </ul>
  
  <p>As you can see there is infinite loop - because React call <code>componentWillReceiveProps</code> in not too smart way - every render cycle instead of callind it only when props actually changed.
  I am really would like to know what is the react way to solve this issue. Should i store child state only in child ? I also tried to store child validity in parent out of state - but my coworkers said that this is not react way - why ? </p>