React Hook Formのform.watch()を深掘りする — 自動検索機能の実装で学んだこと

• URL: https://dev.classmethod.jp/articles/react-hook-form-watch-auto-search
• 日付: 2026-06-20
• Tier: Tier 2
• 要旨: React Hook Formのwatch()を使ってフォーム値の変更を検知し自動検索を実現する実装を深掘りした記事。subscribe/unsubscribeの仕組みと過剰なAPI呼び出しを防ぐdebounce適用の注意点を整理している。

詳細

watch()はformsState.isValidとは独立して動作し、値変化のたびに再レンダリングを引き起こす。useEffectの依存配列にwatchの戻り値を置くと無限ループになるケースがあるため、watchSubscriptionパターン（useEffect内でsubscribeしreturnでunsubscribe）が推奨される。検索のdebounceはlodashのdebounce関数をuseRef経由で保持してメモ化する必要があり、useCallback内のクロージャーで古い値を参照しないよう注意が必要。