title: Controlled vs uncontrolled components in React
body: <p>Almost in every ReactJS tutorial or even in <a href="https://facebook.github.io/react/docs/forms.html" rel="nofollow noreferrer">the official documentation</a> for handling input changes, onChange is recommended. We use a state for the value and change it via onChange. This triggers the render in every key stroke. So, </p>
  
  <ol>
  <li>Is rendering really that cheap?</li>
  <li>Is input value not being held in DOM? So there is no difference between the DOM and VirtualDOM, so although the rendering happens nothing changes? (Wrong assumption probably).</li>
  </ol>
  
  <p>Just for fun and learning purposes I tried those:</p>
  
  <ol>
  <li>Used a custom function and variable to hold the value, set the state after last input not for in every keystroke, passed that value related component etc.</li>
  <li>Used onBlur instead of onChange.</li>
  </ol>
  
  <p>But, I don't like either of them and want to ask this question. If live input value changes is not important for us, we only care for the last input, still onChange is the way to go? </p>