Pourquoi « formState.errors » s'exécute-t-il plusieurs fois ?

Question : Pourquoi [formState.errors](https://stackoverflow.com/a/78820591/23066581) s'exécute-t-il plusieurs fois ?
Réponse :
Lors de l'utilisation de React Hook Form et formState.errors, il est possible que plusieurs nouveaux rendus soient déclenchés. Par exemple, cela peut se produire : Mises à jour de l'état du formulaire : après chaque interaction ou contrôle de validation, React Hook Form met à jour l'état du formulaire. Ces mises à jour ont lieu pour déclencher de nouveaux rendus de votre composant. Plus précisément, après chaque vérification des règles de validation, ou si le paramètre d'erreur se produit, React Hook Form mettra à jour l'objet d'erreurs, puis déclenchera le nouveau rendu du composant.

Comportement de rendu de React : De plus, les nouveaux rendus peuvent même être déclenchés par React lui-même en raison de son algorithme de réconciliation. S'il soupçonne qu'il y a un certain changement dans l'arborescence, React peut pratiquement restituer le composant.

Comportement du mode développement : React effectue un nouveau rendu supplémentaire pour détecter les bugs ou les effets secondaires. Cela peut être dû au comportement de double rendu en cours de développement pour détecter les effets secondaires et garantir que les composants restent purs.

Étapes de dépannage : recherchez plusieurs appels de onSubmit : assurez-vous que onSubmit n'est appelé qu'une seule fois. S'il y a plusieurs soumissions, plusieurs rendus seront effectués.

Optimisation du rendu :

Vous devez éviter les nouveaux rendus inutiles, soit en utilisant React.memo, soit en useMemo si votre composant est complexe ou si la logique de rendu est très coûteuse.

Exemple avec React.memo :

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

Validation anti-rebond : si la validation du formulaire provoque plusieurs mises à jour, envisagez la validation anti-rebond pour réduire la fréquence des changements d'état et des nouveaux rendus.

Évitez les journaux de console inutiles : les journaux fréquents, tels que console.log("errors", erreurs);, peuvent parfois contribuer à la perception de plusieurs rendus, en particulier en mode développement.

Assurez-vous qu'il n'y a pas de mode strict : puisque vous avez mentionné que vous n'utilisez pas le mode React Strict, cela ne devrait pas poser de problème, mais il est bon de vérifier.

Vérifiez la version de React Hook Form : assurez-vous que vous utilisez la dernière version de React Hook Form, car des bogues ou des comportements inattendus peuvent être corrigés dans les versions plus récentes.

Exemple de composant Voici votre exemple avec des optimisations mineures :

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);

Plusieurs rendus se produisent en raison de la manière dont React Hook Form met à jour l'état du formulaire, ou même en raison du processus de réconciliation de React lui-même. L'optimisation du composant et la gestion de l'état diminueraient en fait, voire éviteraient totalement les re-rendus supplémentaires. Si cela ne fonctionne pas, vérifiez les mises à jour ou les problèmes connus dans le référentiel/la documentation de React Hook Form.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!