Submit the form cause the re-rendering of all page

[ithilbor]

Hi I was wondering if by submitting the form via butto is normal that all the page re-renders or there is something wrong. This is my code:

// Ext
import {
  Controller,
  SubmitHandler,
  useForm,
  FormProvider,
} from "react-hook-form";
import {
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  MenuItem,
  TextField,
  Typography,
} from "@mui/material";
import { zodResolver } from "@hookform/resolvers/zod";
// Types
import { LoginFormInputs } from "../types";
// Scss
import "../static/scss/Login.scss";
import BrandName from "../components/BrandName";
import { LoginSchema } from "../schemas";
import { FormInputText } from "../components/form/FormInputTextField";

const Login: React.FC = () => {

  // Form
  const defaultValues: LoginFormInputs = {
    username: "",
    password: ""
  };

  const methods = useForm<LoginFormInputs>({
    resolver: zodResolver(LoginSchema),
    defaultValues,
  });

  const onSubmit: SubmitHandler<LoginFormInputs> = async (
    data: LoginFormInputs
  ) => {
    console.log(data);
  };

  return (
    <Box className="login-itemsbox">
      <Box className="title-box">
        <Typography>
          <BrandName />
        </Typography>
      </Box>
      <Box className="card-form-box">
        <FormProvider {...methods}>
          <Card component="form" onSubmit={methods.handleSubmit(onSubmit)}>
            <CardContent>
              <FormInputText name="username" label="username" />
              <FormInputText name="password" label="password" />
            </CardContent>
            <CardActions>
              <Button type="submit" variant="contained">
                Login
              </Button>
            </CardActions>
          </Card>
        </FormProvider>
      </Box>
      <Box className="small-footer-box">Small Footer</Box>
    </Box>
  );
};

export default Login;

PS: I'm not using the watch function

[leapful]

@IronCub3

Please provide a codesandbox to re-produce the issue. Without a detail context on your issue, no on knows what is the page that has been re-rendered by submit handler.

[ithilbor]

Here it is the sandbox @leapful: https://codesandbox.io/s/test-submit-e525y8?file=/src/App.tsx
Use the react dev tools highlight feature to se that the page is re-rendering each time the submit gives no error.

PS: In this file there is a row with a comment where i found a problem that I've asked in this repo early, to which I've found a workaround but if you have any other suggestion to do it in a better way I'll listen

[leapful]

@IronCub3

Sorry for the late response.

The root cause of re-rendering on the whole form is because formState: { errors } is a proxy that will trigger update its own value context on useForm() hook, therefore when your FormTextField component read its values, parent component which is currently using useForm hook will be re-rendering too.

You can just use Controller component with its field and fieldState to isolate re-rendering on your FormTextField only.

Working demo: https://codesandbox.io/s/test-submit-forked-ywlu2y?file=/src/App.tsx

[ithilbor]

Thank you so much @leapful I've also found another logical issue that I was having in my code with your suggestion! I'm really thankful to your suggestion and do not worry about your late response, better late than never!
Have I nice day and thanks again!

[gearintellix]

I have same problem, it's more worse because after submit it will re-render for all changes (including during typing)
My goal is to build micro component such as label, description, message, and control that associate with the form field

Here the code https://codesandbox.io/p/sandbox/test-react-form-hook-8ry3xt

[mhuggins]

@leapful Does that mean it's not possible to get the "root" form errors without re-rendering the whole form?

I tried to create a nested component, using useFormContext in there to prevent the entire form from re-rendering & isolating it to that specific nested component, but the whole form still re-rendered.