Why does `formState.errors` execute multiple times?

Question: Why does [formState.errors](https://stackoverflow.com/a/78820591/23066581) execute multiple times?
Answar:
When using React Hook Form and formState.errors, there might be a chance that multiple re-renders are being triggered. For example, this might happen: Form State Updates: After each interaction or validation check, React Hook Form updates the form state. These updates occur to trigger re-renders of your component. Specifically, after each time validation rules are checked, or if the error setting occurs, React Hook Form will update the errors object and then trigger the re-render of the component.

Rendering behavior of React: Also, the re-renders may even be triggered by React itself owing to its reconciliation algorithm. If it suspects that there is a certain change in the tree, React can practically re-render the component.

Development Mode Behavior: React does an extra re-rendering to catch bugs or side effects. It can be because of the double-render behavior in development to detect side effects and assure that components are kept pure.

Troubleshooting Steps: Check for Multiple Calls of onSubmit: Make sure that onSubmit is called only once. If there are multiple submissions, it would do multiple re-renders.

Optimizing the Rendering:

You should avoid unnecessary re-renders, either by using React.memo or useMemo if your component is complex or the rendering logic is very expensive.

Example with React.memo :

    const App = React.memo(() => {
  // ...existing code
});

Debounce Validation: If the form validation is causing multiple updates, consider debouncing validation to reduce the frequency of state changes and re-renders.

Avoid Unnecessary Console Logs: Frequent logging, such as console.log("errors", errors);, can sometimes contribute to perceived multiple renders, especially in development mode.

Ensure No Strict Mode: Since you mentioned you’re not using React Strict Mode, this should not be an issue, but it's good to verify.

Verify React Hook Form Version: Ensure you’re using the latest version of React Hook Form, as bugs or unexpected behaviors might be fixed in newer versions.

Example Component Here’s your example with minor optimizations:

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

type FormInputs = {
  firstName: string;
};

const App = React.memo(() => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormInputs>({
    defaultValues: {
      firstName: "",
    },
  });

  function onSubmit(data: FormInputs) {
    console.log("onSubmit", data);
  }

  console.log("errors", errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <br />
      <input type="text" {...register("firstName", { required: "First name is required" })} />
      <br />
      <input type="submit" />
    </form>
  );
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Multiple re-renders occur due to the way React Hook Form updates form state, or even due to the reconciliation process of React itself. The optimization of the component and the handling of the state would actually decrease or even totally avoid extra re-renders. If this doesn't work, check the updates or known issues in React Hook Form's repository/documentation.

The above is the detailed content of Why does `formState.errors` execute multiple times?. For more information, please follow other related articles on the PHP Chinese website!