React Hook Formでロジックを組みながらフレームワークとしてChakraUIを導入していると、register(...) が直接使えない場合があります。このときに使うのが Controllerです。
Chakra UI の NumberInput や Select のような特殊なコンポーネントにはreact-hook-form Controllerを使用します。
register とは
useForm() の返り値のひとつで、入力コンポーネントを React Hook Form に「登録」するための関数です。
HTML標準のような入力要素（<input>, <textarea> など）を React Hook Form へ登録するときに使います。
基本構文
import { useForm } from "react-hook-form";
<input {...register("name")} /> // 「name」という名前でこの入力をフォームに登録する（onChange, refなどを自動で付ける）
-
register("name")を使うことで、その要素が「name」という名前のフォーム入力として管理されるようになります。 -
ref,onChange,onBlur,nameなどが自動的にセットされます。
ref
→ DOMへの参照。React Hook Formが入力の中身を直接読んだり操作したりするために必要。
onChange
→ 入力内容が変わったときに呼ばれる関数。値をフォームの状態に反映させるのに使う。
onBlur
→ フォーカスが外れたときに呼ばれる関数。バリデーションのタイミングに使われることが多い。
name
この入力がどのデータとして扱われるかを識別するキーの名前（例：register("bio") の "bio"）
registerはこれらをinputに追加してReact Hook Formで使えるように拡張しています。
主な対象
- Chakra UI の
Input,Textarea - 素の HTML input 系タグ
Controller とは
Controller はReact Hook Formが提供するコンポーネントの一つです。
（※ControllerはuseForm()の返り値ではない）
control を使って「このinputを管理してください」と包む役目です。
カスタムコンポーネントや Chakra UI の Select, NumberInput など、
register ではうまく動作しない入力要素に使います。
基本構文
import { Controller } from "react-hook-form";
<Controller
// このフォーム項目の名前（RHFで管理するキー）
name="tech"
// useForm() から取り出した controlオブジェクトを渡す（必須）
control={control}
// 実際に描画されるUIをここで定義
render={({ field }) => (
// fieldの中には onChange, value, name, ref などが入っている
// それをSelectInputにまるごと渡すことで、React Hook Formと接続される
<SelectInput {...field} />
)}
/>
-
Controllerは「この項目をRHFで管理したいけど、registerが使えない」場合の仲介役です。 -
fieldの中にvalue,onChange,ref,nameなどが入っており、それをカスタムコンポーネントに渡します。
主な対象
- Chakra UI の
Select,NumberInput - 独自で作成したカスタム入力コンポーネント
違いの比較
| 特徴 | register | Controller |
|---|---|---|
| 対象 | 標準的な input 系 | 特殊・カスタムな UI |
| 書き方 | 簡潔、1行で済む | やや複雑、render関数を使う |
| 渡すprops | {...register("name")} | {...field} をカスタムコンポーネントに渡す |
| バリデーション |
register に直接書ける |
Controller の中で rules を使う |
まとめ
まずは register を基本に使い、うまく動かない・refやvalueが通らないと感じたときは Controller に切り替える、という運用をしています。
最小限のコードで動かすにはシンプルなものは register、複雑なものは Controller と覚えています。
参考リンク
以下のコードはこちらで公開されています。
こちらの別の方の記事もChakra UI + React Hook Formでスタックしてらっしゃったので参考になりました。