title: 'Too many re-renders' when checking for length of input
body: <p>I have a form and trying to validate the username that name should be more than 5 characters long, but after when I am checking it is giving too many re-renders.</p>
  <pre><code>const UserName = (props) =&gt; {
    const [error, setError] = React.useState('');
    if (props.val.length &lt; 5) {
      setError('Username is short');
    }
    return (
      &lt;div className='m-2 d-flex flex-column'&gt;
        &lt;label htmlFor='username'&gt;Username&lt;/label&gt;
        &lt;input
          type='text'
          name='username'
          id='userName'
          onChange={props.userInput}
          value={props.val}
          placeholder='enter your name'
        /&gt;
        &lt;span className='error' style={{ color: 'orangered' }}&gt;
          {error}
        &lt;/span&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>onChange and value is coming from the parent component.</p>
  <p>How do I check for input length?</p>