フロントエンドカンファレンス北海道2024
レギュラートーク(20分)
どさんこ(出身or在住）

React Hook Formで複雑なフォームを作る時のプラクティス

_sushidesu sushidesu _sushidesu
4

React Hook Formはバリデーション機構を備えた、パフォーマンスが高く柔軟なフォームを開発するためのライブラリです。

我々のサービスでは、フォームを提供する画面にReact Hook Formを使用しています。改修を重ねて複雑になっていたフォームのコードを整理した経験をもとに、複雑さを抑えるためのフォームの設計方法や、ライブラリ標準の機能では実現できなかった課題を解決するための実装を紹介します。

具体的には、以下の内容についてお話しします。

  • Contextを用いたコンポーザブルなフォーム設計
  • バリデーション用スキーマを動的に "切り替える" 方法
  • フォームが変わった時に、変更の差分を通知する方法