【React Hook Form】useFormに渡してはいけない型

はじめに

ハマったので共有します。

結論

配列を直接渡してはいけない

大事なことなのでもう一度。

配列を直接渡してはいけない！！！！

例

バグる例

useForm<string[]>

正しい例

useForm<{obj:string[]}>

なぜダメなのか

内部の処理をリポジトリfork→cloneして確認しました。

useFormのProps

props: UseFormProps<TFieldValues, TContext, TTransformedValues> = {}

TFieldValuesを普段型引数として使う、
オプション引数は空のオブジェクト

ここでは問題になりません。エラーも吐かれません。

UseFormProps(型定義)

defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;

渡した型とdefaultValuesを一致させるだけなので別に問題ないです。
関数も渡せるんですね・・(小声)

createFormControlで初期設定する

ここが心臓部分みたいな処理です。
初期値をここで設定します。

let _defaultValues =
    isObject(_options.defaultValues) || isObject(_options.values)
      ? cloneObject(_options.values || _options.defaultValues) || {}
      : {};

isObjectの中身

import isDateObject from './isDateObject';
import isNullOrUndefined from './isNullOrUndefined';

export const isObjectType = (value: unknown): value is object =>
  typeof value === 'object';

export default <T extends object>(value: unknown): value is T =>
  !isNullOrUndefined(value) &&
  !Array.isArray(value) &&　　　　　//←ここ！！！falseになる
  isObjectType(value) &&
  !isDateObject(value);

配列をオブジェクトとして扱わないために初期値が空のオブジェクトになっているというわけです。。。

useWatchの中身(/utils/get.ts)もオブジェクトであること前提な処理になっていて、これ以上は確認していないのですが、恐らくセットするときとかもオブジェクト前提になってるんじゃないかなと思いました。

おわりに

ドキュメントにも「オブジェクト以外渡してくれるな」って書いてあるの見当たらないし時間溶かしました。
ご注意ください。