mcpField
R
react-hook-form

react-hook-form

github.com/midudev開発7.0k78 回インストール2 日前に更新
リポジトリ

react-hook-form について

React Hook Formを採用した開発者向けに、設定、購読、検証、フィールド配列の実践ガイドを提供します。35のルールを影響度別に整理し、参照ファイルとコード例を用意しています。

主な機能

  1. 017カテゴリにわたる35のルール
  2. 02影響度に基づく優先順位
  3. 03フォーム設定と購読の指針
  4. 04検証、状態、フィールド配列の実践方法
  5. 05UIコンポーネントとの統合パターン

活用シーン

  1. 01React Hook Formのフォーム作成や設定
  2. 02フォームの再レンダリング性能の調査
  3. 03制御コンポーネントの統合
  4. 04非同期送信とサーバーエラー処理の確認

インストール

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

$npx skills add https://github.com/midudev/autoskills --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 対応