2021-12-29

Reactでフォーム構築するならReactHookFormでいいじゃんってなった

以前はフォームの構築に関して、「制御コンポーネントかつライブラリ無しのスクラッチでいいのでは？」という気持ちがあった。非制御コンポーネントに気持ち悪さを感じていたのと、どうしてもフォームライブラリはエッジケースに対応できない状況が見受けられてあまりしっくりこなかったからだ。対応できないエッジケースは、例えば２つのフォームで１つのデータになるようなケース。このようなケースはどうしても汚いコードになってしまう。

が、最近この考えが変わってきた。結論から言うとライブラリ使い倒したほうが良く、使うならReactHookFormで良いのではないかと思っている。

フォームの構築は工夫をしないと死ぬほど冗長になってしまう。フォームはフォームのルートとinputコンポーネント間でデータの受け渡しが大量に発生する。これをスクラッチでやろうとすると、よほど工夫をしない限りデータの受け渡しだけで大量のコードが発生してしまう。

じゃあ工夫をすればいいじゃんという話になるが、TypeScriptを使っている場合型パズルスキルが不足して簡潔なコードを書けない状況が多々ある。TypeScriptは良いものだけど、難点として型パズルスキルが不足すると「冗長だけど型安全」もしくは「簡潔だけど型安全じゃない」コードが生まれてしまう。フォームに関してスクラッチする場合も同様だ。

なので、型パズルスキルを上げてスクラッチするか、もしくは既存の型安全かつ簡潔に構築できるライブラリに乗っかるかどちらかのパターンになるわけだが、もう広く使われているライブラリがあるならそれに乗っかったほうが楽じゃんという気持ちになった。確かにエッジケースでは大変だけど、その場合は仕様を弄れないか交渉すればいい。フロントエンドバリデーションは正直そこまで重要性が高いものでないので交渉でなんとかなることが多いと思う。スクラッチするよりかは全然ましだ。

で、ライブラリに乗っかるとしてどのライブラリを使うかだけど、現状ReactHookFormかFormikの二択だと思っている。Formikに関しては最後のリリースが半年前でそこから音沙汰なしの状態で正直不安がある。なので結論ReactHookFormで良いんじゃないかなとなった。