input form 속도 관련 질문입니다.

똑같은 소스코드인데, 모달 창 내에서는 정상적으로 작동하는데 페이지 컴포넌트에서는 느리게 입력되네요.. 불필요한 리렌더링 때문인가요?

소스 코드는 여기 있습니다.

// pages/login.js
const Login = (props) => {
  const DynamicLayout = dynamic(() => import("../layouts/NoParallaxLayout"), {
    loading: () => <LinearLoading />,
  });
  const [cardAnimaton, setCardAnimation] = useState("cardHidden");
  setTimeout(() => {
    setCardAnimation("");
  }, 700);
  const classes = useStyles();
  const { locale } = props;

  const [inputs, onChangeInputs] = useMultipleInput({
    email: "",
    password: "",
  });
  const { email, password } = inputs;

  const inputRef = {
    email: useRef(),
    password: useRef(),
  };
  const handleKeyPress = useCallback(
    (e) => {
      if (e.key === "Enter") {
        switch (e.target.name) {
          case "email":
            return inputRef.password.current.focus();
          case "password":
          default:
            return () => console.log("input result");
        }
      }
    },
    [inputRef],
  );

  const onSubmitHandler = useCallback(() => {
    console.log(inputs);
  }, []);
  console.log(locale);
  console.log(inputs);

  return (
    <>
      <Head>
        <title>Login</title>
      </Head>
      <DynamicLayout>
        <GridItem xs={12} sm={12} md={4}>
          <Card className={classes[cardAnimaton]}>
            <SocialLoginSection color="primary" classes={classes} />
            <p className={classes.divider}>Or with Classical Method</p>
            <form className={classes.form} onSubmit={onSubmitHandler}>
              <CardBody>
                <EmailInput
                  value={email}
                  inputRef={inputRef.email}
                  onChange={onChangeInputs}
                  onKeyPress={handleKeyPress}
                />
                <PasswordInput
                  value={password}
                  inputRef={inputRef.password}
                  onChange={onChangeInputs}
                  onKeyPress={handleKeyPress}
                />
              </CardBody>
              <CardFooter className={classes.cardFooter}>
                <Button simple color="primary" size="lg">
                  로그인
                </Button>
              </CardFooter>
            </form>
          </Card>
        </GridItem>
      </DynamicLayout>
    </>
  );
};

// hooks /useMultipleInput
import { useState, useCallback } from "react";

const useMultipleInput = (initValue = null) => {
  const [inputs, setter] = useState(initValue);
  const handler = useCallback((e) => {
    e.preventDefault();
    const { name, value } = e.currentTarget;
    setter({
      ...inputs,
      [name]: value,
    });
  }, []);
  return [inputs, handler, setter];
};

export default useMultipleInput;

인프런 커뮤니티 질문&답변