Onchange in React input causes the input to rerender on every letter

user_17029661 0
Viewed 3555

So I've created inputs in two functions and on Onchange 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?

App.js

import style from "./auth.module.css";
import { useEffect, useRef, useState } from "react";
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, signInWithEmailAndPassword, signInWithGoogle, registerWithEmailAndPassword } from "../../firebase";
import { CSSTransition } from "react-transition-group";


function Auth() {
  const [activeMenu, setActiveMenu] = useState("main");
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, loading, error] = useAuthState(auth);

  const Emailform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Email:</label>
        <form className={style.input}>
          <input 
            type="email" 
            name="email" 
            required="true"
            value={email} 
            onChange={(e) => setEmail(e.target.value)} />
        </form>
      </div>
    );
  }
  
  const Passform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Password:</label>
  
        <form className={style.input}>
          <input 
            type="password" 
            name="password" 
            required="true"
            value={password} 
            onChange={(e) => setPassword(e.target.value)} />
        </form>
      </div>
    );
  }

  let domNode = useClickOutside(() => {
    setActiveMenu(false);
  });

  return (
    <div className={style.container}>
      <Login />
      <Signup />
    </div>
  );

  function AuthType(props) {
    return (
      <a
        href={props.link}
        className={style.menuItem}
        onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}
      >
        {props.children}
      </a>
    );
  }


/* Login */
  function Login() {
    return (
      <CSSTransition in={activeMenu === "main"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.login}>
            <h1 className={style.title}>Clip It</h1>
            {/* Email and Password */}
            <Emailform/>
            <Passform/>

            <div className={style.button}>
              <input 
                type="submit" 
                value="Login"
                onClick={() => signInWithEmailAndPassword(email, password)} />
              <input 
                type="submit" 
                value="Login with Google"
                onClick={signInWithGoogle} />
            </div>
            <div className={style.text}>
              <p className={style.plink}>Forgot Password</p>
              <div>
                Need an account?&nbsp;
                <AuthType goToMenu="Signup">click here</AuthType>
              </div>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }


  function Signup() {
    return (
      <CSSTransition in={activeMenu === "Signup"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.signUp}>
            <div className={style.title}> Clip It</div>
            <Form label="First Name" type="text" />
            <Form label="Last Name" type="Text" />
            <Form label="Email" type="email"/>
            <Form label="Date of Birth" type="date" />
            <Form label="Password" type="password"/>
            <Form label="Confirm Password" type="password" />
            <div className={style.button}>
              <input type="submit" value="Sign Up" />
            </div>
            <div className={style.text}>
              have an&nbsp;
              <AuthType goToMenu="main"> account</AuthType>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }
}
let useClickOutside = (handler) => {
  let domNode = useRef();

  useEffect(() => {
    let clickListener = (event) => {
      if (domNode.current && !domNode.current.contains(event.target)) {
        handler();
      }
    };

    document.addEventListener("mousedown", clickListener);

    return () => {
      document.removeEventListener("mousedown", clickListener);
    };
  });
  return domNode;
};

function Form(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>

      <form className={style.input}>
        <input 
          type={props.input} 
          name={props.input} 
          required="true" />
      </form>
    </div>
  );
}

export default Auth;
reactjs
2 Answers

Don't put your component definition inside the other component. If you do it, you create a new component at every render.

You need to work around to move Emailform, Passform to outside of Auth.

Checkout this sandbox to experiment

function Auth() {
  //  the bad place to define components
  const Emailform = () => {
    ...
  }
  //  the bad place to define components
  const Passform = () => {
    ...
  }
}
user_119387090

Possible duplicate of: In React ES6, why does the input field lose focus after typing a character?

One solution is to move the Emailform outside of your parent component.

const Emailform = ({ onChange }) => {
  return (
    <div>
      <label>Email:</label>
      <form>
        <input
          type="email"
          name="email"
          required="true"
          onChange={onChange}
        />
      </form>
    </div>
  );
};

const App = () => {
  const [email, setEmail] = useState("");
  return (
    <div>
        <Emailform onChange={(e) => setEmail(e.target.value)} />
    </div>
  );
};
user_123380250
Related