react-hook-formのuseWatch周りでハマった際の記録

概要 先日react-hook-formのuseWatchまわりで試行錯誤するケースがあったため、備忘録がてら記録に残しておこうと思います。 useWatchとは 公式Documentは下記になります。 Formの変更内容を検知するためのカスタムフックです。useFormの戻り値として得られるwatchという関数も似たような用途に使えますが、useWatchの方がレンダリングの範囲を狭められるためパフォーマンス的に優れているようです。 使用例 ※公式Documentより抜粋 interface FormInputs { firstName: string lastName: string } function FirstNameWatched({ control }: { control: Control<FormInputs> }) { const firstName = useWatc