mcpField
R
react-hook-form

react-hook-form

github.com/pproenca開発2183.0k 回インストール11 週間前に更新
リポジトリ

react-hook-form について

React Hook Form を使う開発者向けのリファレンススキルです。フォーム設定や検証、パフォーマンス最適化など、優先度別の 35 項目を収録しています。

主な機能

  1. 017 分野にわたる 35 項目
  2. 02フォーム設定と検証の指針
  3. 03フィールド購読と再レンダー分離
  4. 04制御コンポーネントと UI 連携
  5. 05状態管理とフィールド配列のパターン

活用シーン

  1. 01React Hook Form でのフォーム作成
  2. 02フォームのパフォーマンス確認
  3. 03サーバーエラーと非同期送信への対応
  4. 04制御 UI コンポーネントの統合

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pproenca/dot-skills --skill react-hook-form

インストール後、Claude Code で/react-hook-formを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
metadata.json
README.md
assets/templates/
_template.md
references/
_sections.md
array-disabled-silently-noops.md
array-separate-crud-operations.md
array-unique-fieldarray-per-name.md
array-use-field-id-as-key.md
ctrl-controller-field-props.md
ctrl-usecontroller-isolation.md
formcfg-async-default-values.md
formcfg-default-values.md
formcfg-disabled-prop.md
formcfg-revalidate-mode.md
formcfg-should-unregister.md
formcfg-transformed-values-generic.md
formcfg-useeffect-dependency.md
formcfg-validation-mode.md
formcfg-values-prop.md
formstate-async-submit-lifecycle.md
formstate-avoid-isvalid-with-onsubmit.md
formstate-destructure-formstate.md
formstate-handlesubmit-oninvalid.md
formstate-reset-default-values.md
formstate-useformstate-isolation.md
integ-shadcn-form-import.md
integ-shadcn-select-wiring.md
integ-value-transform.md
sub-avoid-watch-in-render.md

詳細

コミュニティが推奨する React Hook Form のベストプラクティス

React Hook Form アプリケーションのパフォーマンス最適化に関する包括的なガイドです。各ルールは、デフォルトのままでは問題になる判断を取り上げており、7 つのカテゴリーにわたる 35 のルールを収録しています。react-hook-form 7.82.0 に照らして検証済みです。

適用する場面

次のような場合に、これらのガイドラインを参照してください。

  • React Hook Form を使って新しいフォームを作成するとき
  • useForm のオプション（mode、defaultValues、validation）を設定するとき
  • watch / useWatch / subscribe でフォーム値をサブスクライブするとき
  • 制御された UI コンポーネント（MUI、shadcn、Ant Design）を統合するとき
  • useFieldArray で動的なフィールド配列を管理するとき
  • 非同期の送信、サーバーエラー、送信ライフサイクルの状態を処理するとき
  • フォームのパフォーマンス問題をレビューするとき

このスキルを使用しない場面

  • React 19 Server Actions / useActionState — 代わりに react-19 スキルを使用してください
  • 深くネストした、完全に型安全なフォーム — 複雑なネスト構造のスキーマを持つフォームには TanStack Form のほうが適している場合があります。このスキルでは、すでに RHF を選択していることを前提としています
  • 単一入力または単純なフォーム — ライブラリを導入するより、非制御の <form> と FormData を使うほうが簡潔な場合がよくあります

優先度別のルールカテゴリー

優先度カテゴリー影響度プレフィックス
1フォーム設定CRITICALformcfg-
2フィールドのサブスクリプションCRITICALsub-
3制御されたコンポーネントHIGHctrl-
4バリデーションパターンHIGHvalid-
5状態管理MEDIUM-HIGHformstate-
6フィールド配列MEDIUM-HIGHarray-
7統合パターンMEDIUMinteg-

クイックリファレンス

1. フォーム設定（CRITICAL）
  • formcfg-default-values - フォームの初期化には必ず defaultValues を指定する
  • formcfg-useeffect-dependency - formState 自体ではなく、formState のスライスを依存対象にする
  • formcfg-validation-mode - デフォルトの onSubmit 以外の mode を使う場合は理由を明確にする
  • formcfg-revalidate-mode - バリデーションのコストが高い場合を除き、デフォルトの reValidateMode を維持する
  • formcfg-should-unregister - 非表示フィールドを送信データから除外する必要がある場合を除き、shouldUnregister は無効のままにする
  • formcfg-transformed-values-generic - リゾルバーが値を変換する場合は、useForm の第 3 ジェネリック型を指定する
  • formcfg-async-default-values - サーバーデータには非同期の defaultValues を使用する
  • formcfg-disabled-prop - 見た目上の無効化には、register の disabled オプションではなく HTML の disabled 属性を使用する
  • formcfg-values-prop - values プロパティを使って、フォームをサーバーデータと同期させる
2. フィールドのサブスクリプション（CRITICAL）
  • sub-avoid-watch-in-render - 一度だけ値を読み取る場合、レンダー中に watch() を呼び出さない
  • sub-memo-cannot-beat-context - React.memo では、FormProvider 配下で Context によって発生する再レンダーを防げない
  • sub-subscribe-outside-react - React のライフサイクル外でフォームの変更に反応するには subscribe() を使う
  • sub-render-prop-components - 子コンポーネントを作らずに再レンダーを分離するには、レンダープロパティコンポーネントを使う
  • sub-useformcontext-sparingly - 深いネストで useFormContext を使うのは必要最小限にする
  • sub-usewatch-over-watch - 再レンダーを分離するには watch ではなく useWatch を使う
  • sub-watch-specific-fields - フォーム全体ではなく、特定のフィールドを監視する
3. 制御されたコンポーネント（HIGH）
  • ctrl-usecontroller-isolation - 制御された入力は専用の子コンポーネントに分離する
  • ctrl-controller-field-props - UI ライブラリの Controller フィールドプロパティを正しく接続する
4. バリデーションパターン（HIGH）
  • valid-resolver-caching - レンダーパスの外でバリデーションスキーマを一度だけ構築する
  • valid-valueasnumber-empty-nan - 入力が空の場合に valueAsNumber が生成する NaN 値を処理する
  • valid-server-errors - setError('root.serverError', ...) でサーバーエラーを表示する
  • valid-delay-error - delayError を使って、エラー表示の急な切り替わりをデバウンスする
5. 状態管理（MEDIUM-HIGH）
  • formstate-avoid-isvalid-with-onsubmit - ボタンの状態管理では、onSubmit モードで isValid を使わない
  • formstate-destructure-formstate - レンダリング中に依存する formState のプロパティをすべて読み取る
  • formstate-reset-default-values - 保存成功後に resetDefaultValues でデフォルト値を再設定する
  • formstate-handlesubmit-oninvalid - 拒否された送信を処理するには、handleSubmit の第 2 引数を使う
  • formstate-useformstate-isolation - 状態のサブスクリプションを分離するには useFormState を使う
  • formstate-async-submit-lifecycle - 非同期の送信ハンドラーを try/catch で囲み、isSubmitSuccessful でリセットする
6. フィールド配列（MEDIUM-HIGH）
  • array-separate-crud-operations - フィールド配列の操作を順番に分けて実行する
  • array-use-field-id-as-key - useFieldArray のマップでは field.id をキーとして使う
  • array-unique-fieldarray-per-name - フィールド名ごとに useFieldArray のインスタンスを 1 つだけ使う
  • array-disabled-silently-noops - useFieldArray の disabled オプションを指定すると、すべての変更操作が何もせずに終了する
7. 統合パターン（MEDIUM）
  • integ-value-transform - 型強制のために Controller レベルで値を変換する
  • integ-shadcn-form-import - shadcn Form コンポーネントのインポート元を確認する
  • integ-shadcn-select-wiring - スプレッドの代わりに onValueChange を使って shadcn Select を接続する

使用方法

詳しい説明とコード例については、個別のリファレンスファイルをお読みください。

関連スキル

  • Zod resolver によるスキーマ検証については、zod スキルを参照してください
  • React 19 のサーバーアクションについては、react-19 スキルを参照してください
  • UI/UX フォームの設計については、frontend-design スキルを参照してください

完全版ドキュメント

すべてのルールを詳しく記載した完全ガイド：AGENTS.md

コメント

Markdown 対応