「formState.errors」が複数回実行されるのはなぜですか?

質問: [formState.errors](https://stackoverflow.com/a/78820591/23066581) が複数回実行されるのはなぜですか?
答え:
React Hook Form と formState.errors を使用する場合、複数の再レンダリングがトリガーされる可能性があります。たとえば、次のようなことが起こる可能性があります。 フォーム状態の更新: インタラクションまたは検証チェックが行われるたびに、React Hook Form はフォームの状態を更新します。これらの更新は、コンポーネントの再レンダリングをトリガーするために発生します。具体的には、検証ルールがチェックされるたびに、またはエラー設定が発生した後、React Hook Form はエラー オブジェクトを更新し、コンポーネントの再レンダリングをトリガーします。

React のレンダリング動作: また、調整アルゴリズムにより、React 自体によって再レンダリングがトリガーされる場合もあります。ツリーに特定の変更があると疑われる場合、React は事実上コンポーネントを再レンダリングできます。

開発モードの動作: React はバグや副作用を検出するために追加の再レンダリングを行います。これは、開発中の副作用を検出し、コンポーネントが純粋に保たれることを保証するための二重レンダリング動作が原因である可能性があります。

トラブルシューティングの手順: onSubmit の複数の呼び出しを確認する: onSubmit が 1 回だけ呼び出されることを確認します。複数の送信がある場合は、複数回の再レンダリングが行われます。

レンダリングの最適化:

コンポーネントが複雑である場合、またはレンダリング ロジックが非常に高価である場合は、React.memo または useMemo を使用して、不必要な再レンダリングを避ける必要があります。

React.memo を使用した例:

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

検証のデバウンス: フォーム検証により複数の更新が発生している場合は、状態の変更と再レンダリングの頻度を減らすために検証のデバウンスを検討してください。

不必要なコンソール ログを避ける: console.log("errors",errors); などの頻繁なログ記録は、特に開発モードで複数のレンダリングが認識される原因となることがあります。

Strict モードがないことを確認する: React Strict Mode を使用していないと述べたので、これは問題にはなりませんが、確認することをお勧めします。

React Hook Form のバージョンを確認する: バグや予期しない動作は新しいバージョンで修正される可能性があるため、React Hook Form の最新バージョンを使用していることを確認してください。

コンポーネントの例 マイナーな最適化を加えた例を次に示します。

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

React Hook Form がフォームの状態を更新する方法、または React 自体の調整プロセスによって、複数の再レンダリングが発生します。コンポーネントの最適化と状態の処理により、余分な再レンダリングが実際に減少するか、完全に回避されます。これが機能しない場合は、React Hook Form のリポジトリ/ドキュメントで更新または既知の問題を確認してください。

以上が「formState.errors」が複数回実行されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。