title: Handle an input with React hooks
body: <p>I found that there are several ways to handle user's text input with hooks. What is more preferable or proper way to handle an input with hooks? Which would you use?</p>
  
  <p>1) The simplest hook to handle input, but more fields you have, more repetitive code you have to write.</p>
  
  <pre><code>const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  </code></pre>
  
  <p>events:</p>
  
  <pre><code>onChange={event =&gt; setPassword(event.target.value)}
  onChange={event =&gt; setUsername(event.target.value)}
  </code></pre>
  
  <p>2) Similar to above example, but with dynamic key name</p>
  
  <pre><code>const [inputValues, setInputValues] = useState({
    username: '', password: ''
  });
  
  const handleOnChange = event =&gt; {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  };
  </code></pre>
  
  <p>event:</p>
  
  <pre><code>onChange={handleOnChange}
  </code></pre>
  
  <p>3) An alternative to <code>useState</code>, and as said on ReactJS docs, <code>useReducer</code> is usually preferable to <code>useState</code>.</p>
  
  <pre><code>const [inputValues, setInputValues] = useReducer(
    (state, newState) =&gt; ({ ...state, ...newState }),
    {username: '', password: ''}
  );
  
  const handleOnChange = event =&gt; {
    const { name, value } = event.target;
    setInputValues({ [name]: value });
  };
  </code></pre>
  
  <p>event:</p>
  
  <pre><code>onChange={handleOnChange}
  </code></pre>
  
  <p>4) <code>useCallback</code> will return a memoized version of the callback that only changes if one of the dependencies has changed.</p>
  
  <pre><code>const [inputValues, setInputValues] = useState({ 
    username: '', password: '' 
  });
  
  const handleOnChange = useCallback(event =&gt; {
    const { name, value } = event.target;
    setInputValues({ ...inputValues, [name]: value });
  });
  </code></pre>
  
  <p>event:</p>
  
  <pre><code>onChange={handleOnChange}
  </code></pre>