React Hook Formハマりどころとベストプラクティス

BRANK

初めにReact Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しないこれしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがあります。（RHFはdefaultValuesをキャッシュしてしまうため）// 最初は{ name: '', ... }などの初期値が返り、APIからデータが返ってくるとその値が返る const { data: profile } = useProfile() return <Form defaultValues={profile} /> 良い例defaultValuesが確定するまではレンダリングしないようにしま…