react-hook-formとモーダルの設計原則

reactでformを作る時、react-hook-formを使う方も多いと思います。react-hook-fomで実装すると、非制御コンポーネントベースなためレンダリングコストを減らすことが期待でき（実装にもよります）、また、zodとの連携によるバリデーション実装の容易さなど、実装や設計面においても多くのメリットが得られます。 一方で、チームでreact-hook-fomを使って実装を進めていくには設計的難しさを伴うことがあります。筆者は実際にform内におけるモーダルの実装で設計の見直しを迫られました。 本稿は実際に設計を見直すことで筆者が感じた、react-hook-fomの実装における設計の勘所の紹介記事になります。 2つのformの実装原則 先に結論です。react-hook-fomを使ったform実装においては以下の2つの原則を守ることが設計上重要になってきます。 form実装

[mizdra]

setValue/watch なるほど