title: Controlled component input field onChange behaviour
body: <p>I have a <strong>controlled component</strong> with an <code>input</code> field representing a day value. Since this day value can have 1-2 digits, e.g. one has to to delete  12 to enter 21.
  Since the <code>onChange</code> react-event behaves like the <code>input</code> DOM-event, I can only delete or enter one digit and the event is fired, hence the whole model gets updated too early with day set to one after I deleted a digit.</p>
  
  <pre><code>&lt;input
       name={name}
       type="number"
       value={value}
       onChange={(e) =&gt; { onChange(e.target.value) } }
   /&gt;
  </code></pre>
  
  <p>Thanks to <a href="https://stackoverflow.com/questions/30792526/defaultvalue-change-does-not-re-render-input">defaultValue change does not re-render input</a> I can handle this with an <strong>uncontrolled component</strong> input with an <strong><code>onBlur</code></strong> event. Using <code>key</code> ensures, that a new rendering happens, when the model is changed by other means:</p>
  
  <pre><code>  &lt;input
       name={name}
       type="number"
       defaultValue={value}
       key={value}
       onBlur={(e) =&gt; { onChange(e.target.value); }}
   /&gt;
  </code></pre>
  
  <p>But honestly, this feels like a hack. How do you pros solve this scenario? Have I overlooked something simpler? Do you use a timeout-function before updating the model (thus waiting for complete user-input) aka debounce?</p>