🏏 素振り: React Hook Form

あーはいはい、React Hook Formね、知ってる知ってる(知らない)

そんな状態なので素振りしておく。


React Hook Form

https://react-hook-form.com/get-started

React Hook Form の重要なコンセプトの一つは、非制御コンポーネント (Uncontrolled Components) をフックに登録(register) し、フォームフィールドの値を検証と収集できるようにすることです。

DOMベースに値を持つコンポーネントを主体に、いい感じにフォーム管理ができるものという理解をした。 自分がReactを書くときは今のところ制御コンポーネントを使うケースが多いので、React Hook Form 向けに脳をスイッチしないといけなさそう。

useFormregister

特に重要なのは useFormregister の2つ

const { register, handleSubmit } = useForm();

<input {...register("firstName")} />

register から UseFormRegisterReturn 型の値が返ってくる。 非制御コンポーネントで必要になる ref や、onChange, onBlur なんかも一通り含まれるので、これをprops適用するだけで一通り input タグのセットアップが終わる。

既存フォームへ適用する際は、register そのものを渡すか、 forwardRefref を透過的に扱う。

❓ 状態管理する場合の例として、状態管理への書き込みをonSubmit に仕込んでる。現実問題他のタイミングのほうが多そうだけど、値をサッを全部取ったりはできない?

getValues 呼べばok

TypeScript との組み合わせ

https://react-hook-form.com/get-started#TypeScript

useForm に対して型定義を指定するだけだった。 getValues とかもいい感じに型がついた。

バリデーション

❓ バリデーションといえばzodを思い浮かべたけど、連携できるのか?

人類が考えることは同じだった。先駆者の皆様ありがとう

react-hook-form と zod でバリデーションのその先へ React Hook FormとZodを組み合わせて利用する|食べログ フロントエンドエンジニアブログ|note

どうやら Resolver という仕組みがあり、バリデーションライブラリであればシームレスに統合できるらしい。

https://react-hook-form.com/api/useform/#resolver https://www.npmjs.com/package/@hookform/resolvers

zod であれば @hookform/resolvers/zod でいける。

FormData と型定義が重複してツラいのかと思ったけど、 z.infer で型に変換すればいいだけだった。

https://github.com/colinhacks/zod#type-inference

const schema = z.object({
  firstName: z.string().min(1),
  gender: z.enum(["female", "male", "other"]),
});

type FormData = z.infer<typeof schema>;
<input {...register("firstName")} />
{errors.firstName?.message && <p>{errors.firstName?.message}</p>}

完全に理解したので、ほかのAPIとかをみてみる。

useForm

register 以外で気になったやつを見てみる

formState

フォームの状態に関する色々を含んだ state らしい。 - isDirty で変更されてるか / dirtyFields で変更されたフィールド値 - defaultValues で初期値 - valid かどうか みたいなものが取れる。

watch

変更に応じて再描画をトリガーさせたい時に使えるらしい。 なんか迂闊に使うとめっちゃパフォーマンスへの影響がある気配を感じた。

reset

リセットするらしい。 コンポーネントのライフサイクル的にリセットが必要なケースでは役に立ちそう。

trigger

バリデーションを発火させるらしい。メソッド名 validate とかじゃないのね

useController

他のフォームコンポーネントライブラリを使う時に、register だと適用できないので、useController を使うことで独自にマッピングできるぽい。 基本的に register を使っておいて、どうしようもないときの手段と理解した。

useFormContext

コンポーネントってフォームも含めてネストするのは容易に発生するので、その時に Context 使っていい感じに子孫に受け渡せる。便利そう。 実際には FormProvider でラップする。

でもテスト書く時とかどうなるんだろ。

useWatch

watch での再描画のスコープをフックの範囲に閉じ込めるものぽい。 迂闊に watch 使うと再描画激して死ぬみたいなシチュエーションで、子コンポーネントだけに再描画範囲を閉じ込めたりできそう。ナルホド

useFormState

useForm で生成される状態のうち、一部の状態のみに絞り込んでSubscribeできるようになる。 FirstNameInput みたいなコンポーネントを作った時に、 useFormState 経由で firstNameだけ購読させれば、レンダリングの抑制ができるぽい。

useFieldArray

配列系のフォームの操作で使える。 みんな大好き ToDo アプリの行操作とかを作ろうと思ったら使いそう。 普段の開発でも登場シチュエーションは多そうな気配を感じた。


所感

便利そう。導入されるケースが多い理由が少し理解できた気がする。 APIも多すぎず、かつシンプルで理解しやすかった。

TypeScriptとの親和性もあって、zodでバリデーション組んだりできるのも良さそうだった。フォームの初期化とかもサクっとできるのはよさそう。

一方で、 useController とかでUIコンポーネントと繋ぎこみとかし始めると結構カオスになっていきそうな気配も感じた。なんでもかんでも便利そうだからと言って突っ込むと死ぬのはお約束なので、まあ自己責任ではありそう。