title: Can someone give proper explanation for ref vs controlled input and use case for state variable in react?
body: <p>I went through the docs of react, about controlled and uncontrolled components. I have created a simple use case where I want to enforce the user to enter only uppercase values in the input field.</p>
  
  <p>In the first case I have used 'ref' with 'onChange' to achieve this and a global object's property to capture the dom node.Here's the code for that -
              <a href="https://jsfiddle.net/69z2wepo/78064/" rel="noreferrer">https://jsfiddle.net/69z2wepo/78064/</a></p>
  
  <pre><code>class Nikhil extends React.Component {
     constructor(props){
        super(props);
          this.field = {
              input: ''
          };
        }
      foo() {
         this.y = this.field.input;
         this.y.value = this.y.value.toUpperCase();
       }
      render() {
        return (
          &lt;div&gt;
             &lt;input ref={ node =&gt; this.field.input = node } onChange={ this.foo.bind(this) }/&gt;
          &lt;/div&gt;
         );
       }
     }
  
  ReactDOM.render(&lt;Nikhil/&gt;,container);
  </code></pre>
  
  <p>In the second case I have used 'value' property and state with'onChange'.
  Here's the code for that -<a href="https://jsfiddle.net/69z2wepo/78066/" rel="noreferrer">https://jsfiddle.net/69z2wepo/78066/</a></p>
  
  <pre><code>class Nikhil extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          input: ''
      };
    }
    foo(e) {
      this.setState({ input: e.target.value.toUpperCase() });
    } 
    render() {
      return (
        &lt;div&gt;
          &lt;input value= { this.state.input } onChange={ this.foo.bind(this) }/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Nikhil/&gt;,container);
  </code></pre>
  
  <p>The docs says:</p>
  
  <pre><code> With a controlled component, every state mutation will have an 
   associated handler function. This makes it straightforward to 
   modify or validate user input. For example, if we wanted to enforce 
   that names are written with all uppercase letters, we could write 
   handleChange as:
  
   handleChange(event) {
    this.setState({ value: event.target.value.toUpperCase()} );
   }
  </code></pre>
  
  <p>Well I can validate the user input even when I am not using state, and not syncing the value prop with state , as done in the first example above.</p>
  
  <ol>
  <li><p>So definitely validating user input can be done without using state at all ?</p></li>
  <li><p>Can you explain why one approach is better than the other ?</p></li>
  <li><p>What exactly the 'single source of truth' means and why it is so important ?</p></li>
  </ol>
  
  <p>In both the cases I am using a global variable of the component which is an object and can be accessed throughout the component.</p>
  
  <ol start="4">
  <li>Also why should I unnecessarily use value = { this.state.input } in example 2, because that would call render on every keystroke, whereas in case 1 render is called only once. So isn't performance in case 1 better than 2 ?</li>
  </ol>
  
  <p>Also from the docs:</p>
  
  <pre><code> To write an uncontrolled component, instead of writing an 
   event handler for every state update, you can use a ref to get 
   form values from the DOM
  </code></pre>
  
  <p>Well I need to write an event handler like 'onChange' even when using 'ref' to validate user input at run time as done in case 1. So using event handler with 'ref' is normal ?</p>
  
  <p>Use case for state variable -- From my understanding the only case where I have no other option than to use state variable is when I need to update the view dynamically. Because this.setState() calls render every time it is run .
  Here's the code for that -<a href="https://jsfiddle.net/69z2wepo/78068/" rel="noreferrer">https://jsfiddle.net/69z2wepo/78068/</a></p>
  
  <pre><code>class Nikhil extends React.Component {
    constructor(props){
    super(props);
      this.state = {
          input: ''
      };
    }
    foo(e) {
      this.setState({ input: e.target.value });
    }
    render() {
      return (
      &lt;div&gt;
        &lt;input onChange={ this.foo.bind(this) }/&gt;
          &lt;p&gt;{ this.state.input }&lt;/p&gt;
      &lt;/div&gt;
    );
   }
  }
  
  ReactDOM.render(&lt;Nikhil/&gt;,container);
  </code></pre>
  
  <p>I will be grateful if someone could clarify on all the three examples and enhance my understanding of the above concepts.</p>