🫣

【React】watchとuseWatchについてざっくりまとめてみた

2024/06/30に公開

JavaScript

watchとは

watch は、React Hook Formの関数で、フォームのフィールド^[1]の値を監視するために使用されます。
特定のフィールドの値が変更されたときに、その変更を検知して処理を行うことができます。

watchの例文

const MyForm = () => {
  const { register, watch } = useForm();
  
  // "name"フィールドの値を監視
  const name = watch("name");

  return (
    <form>
      {/* "name"フィールドを登録し、入力値を監視 */}
      <input {...register("name")} placeholder="Name" />
      
      {/* 入力された名前をリアルタイムで表示 */}
      <p>{name}</p>
    </form>
  );
}

解説

useFormフックを使用して、register ^[2]と watch を取得します。
const name = watch("name");を使って、"name"フィールドの値を監視します。この値はname という変数に保存されます。
<input {...register("name")}: register("name")を使って、"name"フィールドをフォームに登録します。
<p>{name}</p>で name の値をリアルタイムで表示します。

useWatchとは

useWatch もReact Hook Formの関数です。watch と同じようにフィールドの値を監視するために使いますが、useWatch はもう少し柔軟に使えます。
必要な部分だけが再レンダリングされるため、パフォーマンスが向上します。特に複雑なフォームやパフォーマンスが重要な場合に便利です。
フォームの外でも使えます。

useWatchの例文

const MyForm = () => {
  // useFormフックを使ってフォームの機能を取得
  const { register, control } = useForm();
  
  // useWatchを使って、"name"フィールドの値を監視
  const name = useWatch({ control, name: "name" });

  return (
    <form>
      {/* "name"フィールドを登録し、入力値を監視 */}
      <input {...register("name")} placeholder="Name" />
      
      {/* 入力された名前をリアルタイムで表示 */}
      <p>{name}</p>
    </form>
  );
}

解説

useFormフックを使って、register と control ^[3]を取得します。
useWatch({ control, name: "name" })を使って、"name"フィールドの値をリアルタイムで監視します。この値はname という変数に保存されます。
<input {...register("name")}: register("name")を使って、"name"フィールドをフォームに登録します。
<p>{name}</p>: name の値をリアルタイムで表示します。

なぜuseWatch使用がパフォーマンス向上につながるのか？

Reactの再レンダリングとパフォーマンス

Reactでは、コンポーネントの状態（state）やプロパティ（props）が変更されると、そのコンポーネントが再レンダリングされます。再レンダリングが頻繁に発生すると、パフォーマンスが低下する可能性があります。

例コード

以下に、watchとuseWatchのパフォーマンスの違いを示す具体的な例を示します。

watchの例

const MyForm = () => {
  const { register, watch, handleSubmit } = useForm();
  const name = watch("name");
  const email = watch("email");
  const age = watch("age");

  const onSubmit = data => {
    console.log(data);
  };

  console.log("MyForm rendered");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      <input {...register("email")} placeholder="Email" />
      <input {...register("age")} placeholder="Age" type="number" />
      <button type="submit">Submit</button>
      <p>Name: {name}</p>
      <p>Email: {email}</p>
      <p>Age: {age}</p>
    </form>
  );
};

export default MyForm;

フィールドの値が変更されるたびに、MyForm コンポーネント全体が再レンダリングされます。これにより、パフォーマンスが低下する可能性があります。
フォームの中で特定のフィールドの値をリアルタイムで監視しますが、コンポーネント全体が再レンダリングされるため、パフォーマンスが低下する可能性があります。

useWatchの例

const NameField = ({ control }) => {
  const name = useWatch({ control, name: "name" });
  console.log("NameField rendered");
  return <p>Name: {name}</p>;
};

const EmailField = ({ control }) => {
  const email = useWatch({ control, name: "email" });
  console.log("EmailField rendered");
  return <p>Email: {email}</p>;
};

const AgeField = ({ control }) => {
  const age = useWatch({ control, name: "age" });
  console.log("AgeField rendered");
  return <p>Age: {age}</p>;
};

const MyForm = () => {
  const { register, control, handleSubmit } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      <input {...register("email")} placeholder="Email" />
      <input {...register("age")} placeholder="Age" type="number" />
      <button type="submit">Submit</button>
      <NameField control={control} />
      <EmailField control={control} />
      <AgeField control={control} />
    </form>
  );
};

export default MyForm;

フィールドの値が変更されると、対応するカスタムコンポーネント（NameField, EmailField, AgeField）だけが再レンダリングされます。これにより、不要な再レンダリングを避け、パフォーマンスが向上します。
必要な部分だけが再レンダリングされるため、パフォーマンスが向上します。特に複雑なフォームやパフォーマンスが重要な場合に便利です。

脚注

フォームのフィールドとは、ユーザーがデータを入力するための要素のことです。一般的には、テキストボックス、ラジオボタン、チェックボックス、ドロップダウンリストなどが含まれます。これらのフィールドは、ユーザーから情報を収集するために使用されます。 ↩︎
register は、React Hook Formの関数で、フォームのフィールドを登録するために使用します。これにより、React Hook Formがフィールドの値やバリデーションを管理できるようになります。 ↩︎
control は、React Hook Formのオブジェクトで、フォームの状態を管理するために使用します。useWatch や Controller などの高度な機能を使うときに必要です。 ↩︎