React Hook Formは非制御コンポーネントからどのように変更を検知しているのか？

はじめに React Hook Form が 「非制御コンポーネント」 としてフォームを扱うことでパフォーマンスなどを最適化しているのは有名ですが、 「watch や useWatch で値が入力されるたびにどのように変更を検知しているのか？」 などについては意外と知っている人が少なそうだったのでまとめてみました。 どなたかの参考になれば幸いです。ぜひ最後までご覧ください。 「非制御コンポーネント」とはなにか？ 本題に入る前に、まず React Hook Form を語る上では欠かせない 「制御コンポーネント」「非制御コンポーネント」 について軽く触れておきます。 制御コンポーネント まず「制御コンポーネント」とは一言で言うなら 「入力要素の状態を React（state）が保持するコンポーネント」 のことです。 メリットとしては常に値にアクセスできるため、「ユーザが入力中にバリデーション

[yarumato]

“React Hook Form が非制御コンポーネントとしてフォームを扱うことでパフォーマンス最適化しているのは有名。watchやuseWatchで値が入力されるたびにどのように変更を検知しているのか？”