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

React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo

[akatakun]

「もし求めているものが「見た目の制御」のみならば、useStateやuseRefは不要です」=>CSSで制御できるから

[seal2501]

わかる “React コンポーネントの「制御・非制御」を意識しない方法は、React の新しい使い方を覚えるわけではなく、基礎に立ち帰り CSS スタイリングの引き出しを増やすことです”

[shun9167]

ライブラリに依存しすぎないようにするのは、Reactに限らずいい考え方だなと。

[yarumato]

“React Hook Form は、非制御コンポーネントを使い、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。一方制御コンポーネントとして作成されたコンポーネント例を見てみましょう。”