Reactのフォームにおける状態の設計

フォームライブラリの選定

フロントエンドのディレクトリ構造ベストプラクティスで挙げた bulletproof-react では以下を推奨しているが、どのライブラリもネストしたオブジェクトの一部を更新したい場合に文字列でパスを渡す作りになっていて、そうするとtypoしても気付けないので好ましくない。

react-hook-form
react-final-form
formik

conformというライブラリもある。これは使ったことないけれどネストしたオブジェクトごとに getFieldset を呼び出す仕様だったので良いかも。

制御/非制御コンポーネント

まずは制御/非制御コンポーネントの違いがある。制御コンポーネントの方が状態を扱いやすいが、パフォーマンスは非制御コンポーネントに利がある。React Server Componentsなどの出現によって非制御コンポーネントが見直されているらしいが、公式ドキュメントはどちらが推奨とも書いていなかった。

個人的には、パフォーマンスが問題にならない限りは制御コンポーネントでいいかなと思う。

制御コンポーネントにおける状態と表示の管理

入力として number を要求した場合を考える。このときユーザーの入力次第では不正となるが、状態と表示が完全に同期しているとユーザーの入力が反映できない、または一瞬でも間違えると入力が消えてしまうことになる。

フォームの入力としては全て文字列で受け取って、ポストするときに型変換する方法もあるが、以下の方法と比べてどちらがいいのだろうか。事例を見る限りは全て文字列ではなく適切な型を返すほうが無難そう。