useFormState ({ control: Control }) => FormState

このカスタムフックを使用すると、各フォーム状態を購読し、カスタムフックレベルで再レンダリングを分離できます。フォーム状態の購読に関してスコープがあり、他の useFormState や useForm に影響を与えることはありません。このフックを使用すると、大規模で複雑なフォームアプリケーションでの再レンダリングの影響を軽減できます。

プロパティ

次の表に、引数に関する情報を示します。 useFormState.

名前	型	説明
`control`	`object`	`control` `useForm` によって提供されるオブジェクト。`FormProvider` を使用している場合はオプションです。
`name`	`string \| string[]`	単一の入力名、それらの配列を指定するか、すべての入力の formState の更新を購読します。
`disabled`	`boolean = false`	サブスクリプションを無効にするオプション。
`exact`	`boolean = false`	このプロパティは、入力名のサブスクリプションの完全一致を有効にします。

戻り値

名前	型	説明
`isDirty`	`boolean`	ユーザーがいずれかの入力を変更すると、`true` に設定されます。重要: useForm で、すべての入力の defaultValues を提供してください。これにより、フォームがダーティかどうかを比較するための単一の真実のソースをフックフォームが持つことができます。 const { formState: { isDirty, dirtyFields }, setValue, } = useForm({ defaultValues: { test: "" } }); // isDirty: true setValue('test', 'change') // isDirty: false because there getValues() === defaultValues setValue('test', '') ファイル選択をキャンセルできるため、ファイル入力はアプリレベルで管理する必要があります。 FileList オブジェクト。カスタムオブジェクト、クラス、または File オブジェクトはサポートしていません。
`dirtyFields`	`object`	ユーザーが変更したフィールドを持つオブジェクト。ライブラリが `defaultValues` と比較できるように、useForm を介してすべての入力の defaultValues を提供してください。重要: useForm で defaultValues を提供してください。これにより、各フィールドのダーティさを比較するための単一の真実のソースをフックフォームが持つことができます。ダーティフィールドは、 `isDirty` フォーム状態として表されません。ダーティフィールドは、フォーム全体ではなく、フィールドレベルでダーティとしてマークされるためです。フォーム全体の状態を判断する場合は、代わりに `isDirty` を使用してください。
`touchedFields`	`object`	ユーザーが対話したすべての入力を含むオブジェクト。
`defaultValues`	`object`	で設定されている値。 useForm の defaultValues、または reset APIを介して更新された defaultValues。
`isSubmitted`	`boolean`	フォームが送信された後に `true` に設定されます。`reset` メソッドが呼び出されるまで `true` のままになります。 `true`
`isSubmitSuccessful`	`boolean`	ランタイムエラーなしでフォームが正常に送信されたことを示します。
`isSubmitting`	`boolean`	フォームが現在送信中の場合は `true`。それ以外の場合は `false`。
`isLoading`	`boolean`	フォームが現在、非同期のデフォルト値を読み込んでいる場合は `true`。重要: このプロパティは、非同期の `defaultValues` にのみ適用されます。 const { formState: { isLoading } } = useForm({ defaultValues: async () => await fetch('/api') });
`submitCount`	`number`	フォームが送信された回数。
`isValid`	`boolean`	フォームにエラーがない場合は `true` に設定されます。 `setError` は `isValid` フォーム状態に影響を与えません。 `isValid` は常にフォーム全体の検証結果から導出されます。
`isValidating`	`boolean`	検証中は `true` に設定されます。
`validatingFields`	`boolean`	非同期検証を取得しているフィールドをキャプチャします。
`errors`	`object`	フィールドエラーを含むオブジェクト。エラーメッセージを簡単に取得するための ErrorMessage コンポーネントもあります。

ルール

返された formState は、レンダリングパフォーマンスを向上させ、特定の状態が購読されていない場合は追加の計算をスキップするために Proxy でラップされています。したがって、サブスクリプションを有効にするために、レンダリング前にそれを分解または読み取るようにしてください。

const { isDirty } = useFormState(); // ✅
const formState = useFormState(); // ❌ should deconstruct the formState

例

CodeSandbox ^TS

import * as React from "react";
import { useForm, useFormState } from "react-hook-form";

function Child({ control }) {
  const { dirtyFields } = useFormState({
    control
  });

  return dirtyFields.firstName ? <p>Field is dirty.</p> : null;
};

export default function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
      firstName: "firstName"
    }
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <Child control={control} />

      <input type="submit" />
    </form>
  );
}

ご支援ありがとうございます

React Hook Form がプロジェクトで役立つ場合は、スターを付けてサポートすることを検討してください。