title: Onchange in React input causes the input to rerender on every letter
body: <p>So I've created inputs in two functions and on <code>Onchange</code> it gets the value that is being input into them. But anytime I type into the inputs I can only type a letter at a time before it is unfocused and I believe this is because the component keeps on rendering.
  I've also realized that whenever I remove the Onchange and value props then everything goes back to normal and I'm able to type everything easily. How would I fix this?</p>
  <p><strong>App.js</strong></p>
  <pre><code>import style from &quot;./auth.module.css&quot;;
  import { useEffect, useRef, useState } from &quot;react&quot;;
  import { useAuthState } from 'react-firebase-hooks/auth';
  import { auth, signInWithEmailAndPassword, signInWithGoogle, registerWithEmailAndPassword } from &quot;../../firebase&quot;;
  import { CSSTransition } from &quot;react-transition-group&quot;;
  
  
  function Auth() {
    const [activeMenu, setActiveMenu] = useState(&quot;main&quot;);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [user, loading, error] = useAuthState(auth);
  
    const Emailform = () =&gt; {
      return (
        &lt;div className={style.formBox}&gt;
          &lt;label className={style.label}&gt;Email:&lt;/label&gt;
          &lt;form className={style.input}&gt;
            &lt;input 
              type=&quot;email&quot; 
              name=&quot;email&quot; 
              required=&quot;true&quot;
              value={email} 
              onChange={(e) =&gt; setEmail(e.target.value)} /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
    
    const Passform = () =&gt; {
      return (
        &lt;div className={style.formBox}&gt;
          &lt;label className={style.label}&gt;Password:&lt;/label&gt;
    
          &lt;form className={style.input}&gt;
            &lt;input 
              type=&quot;password&quot; 
              name=&quot;password&quot; 
              required=&quot;true&quot;
              value={password} 
              onChange={(e) =&gt; setPassword(e.target.value)} /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  
    let domNode = useClickOutside(() =&gt; {
      setActiveMenu(false);
    });
  
    return (
      &lt;div className={style.container}&gt;
        &lt;Login /&gt;
        &lt;Signup /&gt;
      &lt;/div&gt;
    );
  
    function AuthType(props) {
      return (
        &lt;a
          href={props.link}
          className={style.menuItem}
          onClick={() =&gt; props.goToMenu &amp;&amp; setActiveMenu(props.goToMenu)}
        &gt;
          {props.children}
        &lt;/a&gt;
      );
    }
  
  
  /* Login */
    function Login() {
      return (
        &lt;CSSTransition in={activeMenu === &quot;main&quot;} unmountOnExit timeout={500}&gt;
          &lt;div ref={domNode}&gt;
            &lt;div className={style.login}&gt;
              &lt;h1 className={style.title}&gt;Clip It&lt;/h1&gt;
              {/* Email and Password */}
              &lt;Emailform/&gt;
              &lt;Passform/&gt;
  
              &lt;div className={style.button}&gt;
                &lt;input 
                  type=&quot;submit&quot; 
                  value=&quot;Login&quot;
                  onClick={() =&gt; signInWithEmailAndPassword(email, password)} /&gt;
                &lt;input 
                  type=&quot;submit&quot; 
                  value=&quot;Login with Google&quot;
                  onClick={signInWithGoogle} /&gt;
              &lt;/div&gt;
              &lt;div className={style.text}&gt;
                &lt;p className={style.plink}&gt;Forgot Password&lt;/p&gt;
                &lt;div&gt;
                  Need an account?&amp;nbsp;
                  &lt;AuthType goToMenu=&quot;Signup&quot;&gt;click here&lt;/AuthType&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/CSSTransition&gt;
      );
    }
  
  
    function Signup() {
      return (
        &lt;CSSTransition in={activeMenu === &quot;Signup&quot;} unmountOnExit timeout={500}&gt;
          &lt;div ref={domNode}&gt;
            &lt;div className={style.signUp}&gt;
              &lt;div className={style.title}&gt; Clip It&lt;/div&gt;
              &lt;Form label=&quot;First Name&quot; type=&quot;text&quot; /&gt;
              &lt;Form label=&quot;Last Name&quot; type=&quot;Text&quot; /&gt;
              &lt;Form label=&quot;Email&quot; type=&quot;email&quot;/&gt;
              &lt;Form label=&quot;Date of Birth&quot; type=&quot;date&quot; /&gt;
              &lt;Form label=&quot;Password&quot; type=&quot;password&quot;/&gt;
              &lt;Form label=&quot;Confirm Password&quot; type=&quot;password&quot; /&gt;
              &lt;div className={style.button}&gt;
                &lt;input type=&quot;submit&quot; value=&quot;Sign Up&quot; /&gt;
              &lt;/div&gt;
              &lt;div className={style.text}&gt;
                have an&amp;nbsp;
                &lt;AuthType goToMenu=&quot;main&quot;&gt; account&lt;/AuthType&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/CSSTransition&gt;
      );
    }
  }
  let useClickOutside = (handler) =&gt; {
    let domNode = useRef();
  
    useEffect(() =&gt; {
      let clickListener = (event) =&gt; {
        if (domNode.current &amp;&amp; !domNode.current.contains(event.target)) {
          handler();
        }
      };
  
      document.addEventListener(&quot;mousedown&quot;, clickListener);
  
      return () =&gt; {
        document.removeEventListener(&quot;mousedown&quot;, clickListener);
      };
    });
    return domNode;
  };
  
  function Form(props) {
    return (
      &lt;div className={style.formBox}&gt;
        &lt;label className={style.label}&gt;{props.label}:&lt;/label&gt;
  
        &lt;form className={style.input}&gt;
          &lt;input 
            type={props.input} 
            name={props.input} 
            required=&quot;true&quot; /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default Auth;
  </code></pre>