React Hook Form（以下、RHF）を使い始めたときに**「とりあえず動いたけど、後でバグの原因になった」**という経験はありませんか？
この記事では、初心者がやりがちなミスを3つに絞って紹介します。
それぞれの誤りパターン → 改善例 → 理由をシンプルにまとめました。
React Hook Formとは
フォームの入力管理・バリデーションを簡単にしてくれる人気ライブラリです。
内部でフォーム状態を管理してくれるため、useStateを使わずにフォームを扱えます。
公式ドキュメント：https://react-hook-form.com/
❌ ミス1：useStateで二重管理してしまう
RHFは内部で状態を管理するため、useStateでの管理は不要です。
誤った例
const [email, setEmail] = useState("");
<input value={email} {...register("email")} onChange={(e) => setEmail(e.target.value)} />
正しい例
<input type="email" {...register("email")} />
registerに渡した時点でRHFが状態を管理してくれるので、
useStateを併用すると二重管理になり、バグの原因になります。
❌ ミス2：onChangeで毎回setValueを呼ぶ
フォーム入力を「setValueで更新しよう」と考えるのもよくある誤りです。
誤った例
<input
{...register("username")}
onChange={(e) => setValue("username", e.target.value)}
/>
正しい例
<input type="text" {...register("username")} />
RHFはregisterが自動で値を管理します。
setValueは「外部データをフォームにセットする場合（例：APIレスポンス）」だけ使いましょう。
❌ ミス3：エラーメッセージを表示しない
バリデーションを設定しても、ユーザーにエラーを伝えなければ意味がありません。
誤った例
<input {...register("email", { required: true })} />
正しい例
const { register, formState: { errors } } = useForm();
<input {...register("email", { required: "メールアドレスは必須です" })} />
{errors.email && <p>{errors.email.message}</p>}
formState.errorsを使えば、どの項目でエラーが出ているかを明示できます。
まとめ
| よくある誤り | 改善ポイント |
|---|---|
useStateで値を管理 |
RHFに任せる |
onChangeでsetValue呼び出し |
registerで十分 |
| エラーを表示しない |
errorsを活用 |
RHFは「最小限の記述でフォームを管理できる」ライブラリです。
**“任せられる部分はReact Hook Formに任せる”**を意識すると、シンプルで保守性の高いコードになります。
詳しい解説・背景はこちら