React Hook Formの基礎を3ステップで理解しよう

はじめに

Reactでフォームを扱うとき、useStateで1つずつ入力値を管理したり、バリデーションでコードが複雑になってしまうことはありませんか？

そんなときに便利なのが React Hook Form（RHF） です。
軽量でシンプル、そしてパフォーマンスが高いフォームライブラリとして多くのReactプロジェクトで使われています。

この記事では、

「RHFをこれから使いたい人が最初に理解すべき流れ」
を 3ステップ に整理して紹介します。

---

Step 1：useFormとregisterでフォームを作る

RHFの中心となるのが useForm() フックです。
これを呼び出すと、フォームを管理するための関数や状態がまとめて取得できます。

import { useForm } from "react-hook-form";

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="名前" />
      <input {...register("email")} placeholder="メールアドレス" />
      <button type="submit">送信</button>
    </form>
  );
}

register("name") でフォーム要素をRHFに登録します。
これにより、RHFが自動で状態を管理してくれるため、useStateを使う必要がありません。

結果として、再レンダリングが減り、フォーム処理が軽く・シンプルになります。

---

Step 2：handleSubmitでデータを送信する

フォーム送信時の処理は handleSubmit() を利用します。
これをonSubmitに渡すことで、入力値をまとめて受け取ることができます。

const { register, handleSubmit, formState: { errors } } = useForm();

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

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input
      {...register("email", { required: "メールアドレスは必須です" })}
      placeholder="メールアドレス"
    />
    {errors.email && <p>{errors.email.message}</p>}
    <button type="submit">送信</button>
  </form>
);

✅ ポイント

• handleSubmitが呼ばれると、バリデーションが自動で実行される
• 成功時は onSubmit にデータが渡される
• バリデーション結果は formState.errors で取得できる

{errors.email && <p>{errors.email.message}</p>} のように書くと、
エラー表示も簡単に実装できます。

---

Step 3：reset / setValue / getValuesで値を操作する

フォーム送信後に入力内容をリセットしたいときは reset() を使います。

const { register, handleSubmit, reset } = useForm();

const onSubmit = (data) => {
  console.log(data);
  reset(); // フォームを初期化
};

特定の値を動的に変更したい場合は setValue() を使います。

const { register, setValue } = useForm();
setValue("name", "ねこのこ"); // nameフィールドに値を代入

さらに、現在の入力値を取得したいときは getValues()。

import { useForm } from "react-hook-form";

export default function App() {
  const { register, getValues } = useForm();

  const handleCheckValues = () => {
    const values = getValues(); // 全入力値を取得
    console.log(values);

    const nameValue = getValues("name"); // 特定フィールドのみ取得
    console.log(nameValue);
  };

  return (
    <form>
      <input {...register("name")} placeholder="名前" />
      <input {...register("email")} placeholder="メールアドレス" />
      <button type="button" onClick={handleCheckValues}>
        入力内容を確認
      </button>
    </form>
  );
}

使い分けまとめ

メソッド	使う場面
reset()	全体を初期化したいとき
setValue()	特定の項目だけ変更したいとき
getValues()	現在の入力値を確認したいとき

---

まとめ：3ステップでRHFの基本を理解しよう

ステップ	学ぶ内容	キーワード
Step 1	フォームを作る	useForm, register
Step 2	データを送信する	handleSubmit, errors
Step 3	値を操作する	reset, setValue, getValues

この3ステップを理解すれば、RHFの基本的な流れを一通りつかめます。
最初はこの形を何度か手で書いてみるのがおすすめです。

---

次のステップ

慣れてきたら、次のような応用テクニックに挑戦してみましょう。

• ControllerでMUIなどUIライブラリと連携する
• watch / useWatch で入力値をリアルタイムに追跡する
• isValid / isDirty / isSubmitting などフォーム状態を管理する

これらを使いこなせるようになると、実務レベルのフォーム実装ができるようになります。
まずは今回の3ステップをしっかり押さえて、RHFの基礎を固めましょう 💪

---

細かい補足や背景などは以下の記事で解説しています。