title: React - this.input.value vs handle change
body: <p>What is better? </p>
  
  <p>I have a form with 10 inputs.</p>
  
  <p>Should I use <code>this.input.value</code> or handle change and store it in <code>state</code>?</p>
  
  <pre><code>handleChange(e) {
      this.setState({input: e.target.value});
  }
  ...
  &lt;input type="text" value={this.state.input} onChange={this.handleChange} /&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>onSubmit() {
      const inputValue = this.input.value;
      ...
  }
  ...
  &lt;input type="text" ref={(input) =&gt; {this.input = input;}} /&gt;
  </code></pre>
  
  <p>From the documentation:</p>
  
  <blockquote>
    <p>When to Use Refs</p>
  
  <pre><code>There are a few good use cases for refs:
  
      Managing focus, text selection, or media playback.
      Triggering imperative animations.
      Integrating with third-party DOM libraries.
  
  Avoid using refs for anything that can be done declaratively.
  </code></pre>
  </blockquote>