react-hook-formを布教したい

Author's Twitter.GitHub repository.

react-hook-formを使うと、フォームをハンドリングするコードをコンパクトにできます。
フォームのステートの管理やバリデーションのタイミングなどもある程度デフォルトで設定されているので全てのロジックを実装する必要がなくなります。
いくつか従来のフォームの実装と比較した例を置いておくので、比較して良いと思ったら是非react-hook-formを採用していってください！

普通のフォームの実装です。
入力値のstateの定義やstateの変更のハンドリングを記述しなくていいので、コードの記述量が減ってすっきりとします。

従来の実装

first name
last name

react-hook-formを使った実装

first name
last name

バリデーションありのフォームの実装です。
基本的なバリデーションに関してはロジックが用意してあるので、圧倒的に記述量が減ります。
値を引数にとってエラーメッセージを返り値とするカスタムバリデーション関数をregisterで設定することも可能です。

また、useFormのmodeプロパティを設定することで、バリデーションの走るタイミングを制御することも可能です。
https://react-hook-form.com/api#useForm

従来の実装

first name
last name
age

react-hook-formを使った実装

first name
last name
age

react-hook-formは入力値の状態をstateで管理していないので、入力値が更新されるたびにレンダリングが走るということがありません。
これによって、コンポーネントの再描画のコストが減ります。

従来の実装

レンダリング回数: 1
first name
last name
age

react-hook-formを使った実装

レンダリング回数: 1
first name
last name
age

フィールドのリストを実装するサンプルです。
ほとんどの配列操作のメソッドが定義されているので、値の配列をstateで管理してそれを操作するメソッドを実装する必要がありません。
https://react-hook-form.com/api#useFieldArray

従来の実装

  • first name
    last name

react-hook-formを使った実装

  • first name
    last name

TextFieldコンポーネントで実装したサンプルです。

実装例

first name
last name

TextFieldコンポーネント