mcpField
R
react-hook-form

react-hook-form

github.com/pymodel開発40500 回インストール5 週間前に更新
リポジトリ

react-hook-form について

React Hook Form でフォームを構築する開発者向けの実装・パフォーマンスガイドです。設定、購読、制御コンポーネント、検証、フィールド配列、連携を優先度別のルールで扱います。

主な機能

  1. 018カテゴリにわたる45ルール
  2. 02優先度別のフォーム指針
  3. 03フィールド購読の実践
  4. 04制御コンポーネントのパターン
  5. 05検証とフィールド配列の助言

活用シーン

  1. 01React Hook Form でのフォーム構築
  2. 02フォームの不要な再レンダー削減
  3. 03検証・フィールド配列コードのレビュー

インストール

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

$npx skills add https://github.com/pymodel/react-frontend-skills --skill react-hook-form

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

同梱ファイル

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

references/
adv-devtools-performance.md
adv-formprovider-memo.md
adv-opaque-types.md
adv-testing-wrapper.md
array-complete-default-objects.md
array-separate-crud-operations.md
array-unique-fieldarray-per-name.md
array-use-field-id-as-key.md
array-virtualization-formprovider.md
ctrl-avoid-double-registration.md
ctrl-controller-field-props.md
ctrl-local-state-combination.md
ctrl-single-usecontroller-per-component.md
ctrl-usecontroller-isolation.md
formcfg-async-default-values.md
formcfg-default-values.md
formcfg-revalidate-mode.md
formcfg-should-unregister.md
formcfg-useeffect-dependency.md
formcfg-validation-mode.md
formstate-avoid-isvalid-with-onsubmit.md
formstate-destructure-formstate.md
formstate-getfieldstate-for-single-field.md
formstate-subscribe-to-specific-fields.md
formstate-useformstate-isolation.md
integ-mui-controller-pattern.md
integ-shadcn-form-import.md
integ-shadcn-select-wiring.md
integ-typed-submit-server-action.md
integ-value-transform.md

詳細

React Hook Form のベストプラクティス

React Hook Form アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリーにわたる 45 のルールを収録し、フォームの開発、自動リファクタリング、コード生成に役立つよう、影響度に応じて優先順位を付けています。

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

  • React Hook Form を使って新しいフォームを作成するとき
  • useForm オプション（mode、defaultValues、validation）を設定するとき
  • watch/useWatch でフォームの値を購読するとき
  • 制御 UI コンポーネント（MUI、shadcn、Ant Design）を統合するとき
  • useFieldArray で動的なフィールド配列を管理するとき
  • パフォーマンス上の問題がないかフォームをレビューするとき

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

優先度カテゴリー影響度プレフィックス
1フォーム設定重大formcfg-
2フィールドの購読重大sub-
3制御コンポーネント高ctrl-
4バリデーションパターン高valid-
5フィールド配列中〜高array-
6状態管理中formstate-
7統合パターン中integ-
8高度なパターン低adv-

クイックリファレンス

1. フォーム設定（重大）
  • formcfg-validation-mode - UX とバリデーションコストを考慮してバリデーションモードを選択する
  • formcfg-revalidate-mode - 送信後の再バリデーションを慎重に選択する
  • formcfg-default-values - フォームの初期化には常に defaultValues を指定する
  • formcfg-async-default-values - サーバーデータには async defaultValues を使用する
  • formcfg-should-unregister - 送信時の意味に基づいて shouldUnregister を選択する
  • formcfg-useeffect-dependency - useEffect の依存配列に useForm の戻り値オブジェクトを含めない
2. フィールドの購読（重大）
  • sub-usewatch-over-watch - 再レンダリングを分離するため、watch ではなく useWatch を使用する
  • sub-watch-specific-fields - フォーム全体ではなく、特定のフィールドを監視する
  • sub-usewatch-with-getvalues - タイミングの安全性を確保するため、useWatch と getValues を組み合わせる
  • sub-deep-subscription - データが必要なコンポーネントツリーの深い位置で購読する
  • sub-avoid-watch-in-render - 一度だけ値を読み取る場合、render 内で watch() を呼び出さない
  • sub-usewatch-default-value - 初回レンダリングのために useWatch に defaultValue を指定する
  • sub-useformcontext-sparingly - 深いネストでは useFormContext を必要な場合に限って使用する
3. 制御コンポーネント（高）
  • ctrl-usecontroller-isolation - 再レンダリングを分離するため、useController を使用する
  • ctrl-avoid-double-registration - useController と二重に登録しない
  • ctrl-controller-field-props - UI ライブラリに合わせて Controller の field プロパティを正しく接続する
  • ctrl-single-usecontroller-per-component - 分離が有効な場合は、制御フィールドを分割する
  • ctrl-local-state-combination - UI のみで使う状態には、ローカル状態と useController を組み合わせる
4. バリデーションパターン（高）
  • valid-resolver-caching - resolver のキャッシュを利用できるよう、コンポーネントの外でスキーマを定義する
  • valid-dynamic-schema-factory - 動的なバリデーションにはスキーマファクトリーを使用する
  • valid-error-message-strategy - ErrorMessage（7.88+）またはオプショナルチェーンでフィールドのエラーを表示する
  • valid-trigger-should-touch - バリデーションを実行するときにフィールドを touched としてマークする（7.87+）
  • valid-inline-vs-resolver - 複雑なルールにはインラインバリデーションより resolver を優先する
  • valid-delay-error - delayError を使用して、エラーの急速な表示を遅延させる
  • valid-native-validation - シンプルなフォームではネイティブバリデーションを検討する
  • valid-form-level-validate - フォームレベルの validate オプションでフィールド間のバリデーションを行う（7.72+）
5. フィールド配列（中〜高）
  • array-use-field-id-as-key - useFieldArray のマップでは field.id を key として使用する
  • array-complete-default-objects - フィールド配列の操作には完全なデフォルトオブジェクトを指定する
  • array-separate-crud-operations - 順次実行するフィールド配列の操作を分ける
  • array-unique-fieldarray-per-name - フィールド名ごとに useFieldArray のインスタンスを 1 つだけ使用する
  • array-virtualization-formprovider - 仮想化されたフィールド配列には FormProvider を使用する
6. 状態管理（MEDIUM）
  • formstate-destructure-formstate - レンダリング前に formState のプロパティを分割代入します
  • formstate-useformstate-isolation - useFormState を使用して状態のサブスクリプションを分離します
  • formstate-getfieldstate-for-single-field - 単一フィールドの値を読み取るには getFieldState と getErrors を使用します
  • formstate-subscribe-to-specific-fields - useFormState で特定のフィールド名をサブスクライブします
  • formstate-avoid-isvalid-with-onsubmit - 送信の制御条件を検証モードに合わせます
7. 統合パターン（MEDIUM）
  • integ-shadcn-form-import - shadcn Form コンポーネントのインポート元を確認します
  • integ-shadcn-select-wiring - スプレッド構文ではなく onValueChange を使って shadcn Select を接続します
  • integ-mui-controller-pattern - Material-UI コンポーネントには Controller を使用します
  • integ-value-transform - 型変換のために Controller レベルで値を変換します
  • integ-typed-submit-server-action - 型付けされた handleSubmit の結果または Server Action（7.84+）を使って送信します
8. 高度なパターン（LOW）
  • adv-formprovider-memo - プロファイリング後にのみ FormProvider の子要素をメモ化します
  • adv-devtools-performance - 本番環境およびパフォーマンステスト中は DevTools を無効にします
  • adv-testing-wrapper - QueryClient と AuthProvider を含むテスト用ラッパーを作成します
  • adv-opaque-types - OpaqueTypes に値クラスを登録します（7.87+）

使用方法

まず、プロジェクトのルートで実行します。

npx -y @pymodel/react-frontend-skills detect                        # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill react-hook-form  # deprecated APIs → rule IDs

上記の各ルールのうちタスクに該当するもの、および scan で検出された各項目について、references/<rule-id>.md を読みます。重要な理由と、誤ったコードと正しいコードが記載されています。

関連スキル

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

コメント

Markdown 対応