React Hook FormとZodを触ってみる
よい触り始めて2週間くらい経っちゃったけど
気づいたこと
理解したこと
疑問
などを書いてみる
よいRHFのContorllerコンポーネント使ってるけどuseFormの返り値のcontrolの型の制御にハマっている...
フォーム全体の型になってしまうから、これじゃContorllerでラップしたコンポーネントにcontrolをpropsで渡したい時に再利用できないのでは...？
よいuseControllerなるものがあるらしくUseControllerProps型を使ったら上手いこといった
useControllerと<Controller />の違いはhooksかrender propかの違いのみっぽい
よい同じフィールドに対してエラーメッセージを複数同時に出したい場合はcriteriaModeを使う
よいマルチステップフォームの各ステップでバリデーションする方法
自分で実装した通り、各ステップのschemaを分岐して実装するのが良さそう
よい更新フォームなど初期値をAPIから取得する場合useFormのvaluesプロパティを使う
which is useful when your form needs to be updated by external state or server data.
valuesとdefaultValuesの違い
values will react to changes and reflect on the form values, and defaultValues is cached for once and will never re-run the promise or react to defaultValues changes.
もしくはコンポーネントを分割する
Suspenseが使えるならSuspenseを使う（dataがundefinedにならないからこれが一番良いと思う）
よいinputの値を監視したいときはuseFormのwatchもしくはuseWatch を使う
watchはフォームのrootコンポーネントで再レンダリングしてしまうため、基本はuseWatchの方が良さそう
ただcontrolを渡さないといけないのでpropsで子コンポーネントまで持っていくのがちょっと面倒
よいdynamic form(+ボタンでinputを増やすようなやつ)にはuseFieldArrayを使う
値を監視したい場合はuseWatchと組み合わせる
よいuseFieldArray + useWatch + idを使うパターンがかなり謎挙動
useFieldArrayの返り値のfieldsのidは上書かれないけど、watchした方は上書かれるっぽい？
よいuseFormにvaluesを渡すとデフォルトではdefaultValuesも上書くらしい
上書きたくない場合はkeepDefaultValuesを使う
defaultValuesはisDirtyにも使われるから、デフォルトのこの挙動はかなりわかりにくいと思う
よいreset系のAPIのkeepDefaultValuesフラグなどについて（かなりわかりにくい）
↓ちょっとだけ関係してる（？）
よいonBlurでsubmitしたい