【要約】React Hook Form 入門 Part 3 — Controller と useFieldArray を実務で使いこなす [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
以下の技術的課題を扱う。
- ・UI ライブラリ（MUI, Ant Design 等）が Controlled component であり、
registerによる ref 参照が困難な点。 - ・電話番号やメンバーリストなど、動的に増減するフォーム項目の管理。
- ・配列の削除時に
key={index}を使用することで発生する、React のレンダリング不整合。
// Approach
以下の手法で課題を解決する。
1.
Controller を用い、UI ライブラリの value と onChange を RHF に接続する。2.
useFieldArray を導入し、append や remove で配列操作を制御する。3.配列の
key には必ず field.id を指定し、要素の識別を確実にする。4.
useForm の defaultValues を明示的に設定し、警告を回避する。// Result
UI ライブラリを用いた高度なフォーム実装が可能となる。動的な配列操作も安全かつ宣言的に記述できる。大規模なフォームでは、
React.memo や useWatch を活用することで、パフォーマンスを維持した実装が可能である。Senior Engineer Insight
> 実務における RHF の真価は、
Controller による外部ライブラリとの統合にある。register と field の混在は二重管理を招くため厳禁だ。また、動的フォームでは field.id の利用が必須となる。大規模開発では、再レンダリング抑制のためのコンポーネント分割設計が、UX とパフォーマンスを分ける境界線となる。これらを理解することで、堅牢なフォーム実装が可能になる。