React コンポーネントの「制御・非制御」を意識しない方法

BRANK

React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリReact Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Form の送信準備は完了です。const { register } = useForm(); <Checkbox {...register("test")} />; 一方「制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。React Hook Form で制御コンポーネントを扱うとき、<Controller>コンポーネントやuseControllerフックを中継する必要があります。冗長ですが、外部ライブラリなど、デザインシステムがそもそも制御コンポーネントで作られていた場合、選択肢はこちらしかありません。const { control } = useForm(); <Controller control…