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

こんにちは。エンジニアの根岸です。コミューンには2年ほど前から副業で関わっていたのですが、昨年の12月に正社員としてジョインすることになりました。

コミューンのプロダクトには比較的長く関わっているのですが、知らないうちにフォームライブラリのReact Hook Formが導入されていました。 React Hook Formを使っていて、どうやって入力内容が変更されたことを検知しているのか疑問に思ったので調べてみました。

React Hook Formとは

React Hook Formは軽量かつ高パフォーマンスなフォームライブラリです。 ReactのフォームライブラリにはFormikやredux-fromなどがありますが、それらと比較して高速であることが公式サイトでアピールされています。 React Hook Formは後発のライブラリですが、最近はだいぶ名前を聞くようになりました。いまフォームライブラリを採用するならFormikかReact Hook Formの2択になってきたように感じます。

ちなみに僕は1年半ほど前にReact Hook Formを業務で採用を試みたことがあります。ですが当時のバージョンは拡張性が低く、実装の要件を満たさないことが発覚して、React Hook Formで書いたコードをすべてFormikに羽目になりました。そのときはもう使わんと思ったのですが、今日ではv6までアップデートされて拡張性もかなり高くなりました。いまのバージョンだったらFormikに書き直す必要もなかったでしょう。

非制御コンポーネントとはなにか

React Hook Formの最大の特徴は非制御コンポーネントを利用する点です。非制御コンポーネントとはフォームデータをDOMによって管理するコンポーネントのことです。

React Hook Formを使ったフォームのコードを見ると、refにregister関数を渡していることがわかります。フォームの値はinputタグのvalueに保持させて、React Hook Formはref経由で値を取得します。 React Hook Formはrefから値を取得することで、値が変化したことによるrerenderを防いでいます。

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" ref={register} />
    </form>
  )
)