react-hook-formというのを知ったので調査してみる
hooksベースでUIの機能を提供するライブラリ react-hook-form.com
特徴としては他のライブラリよりハイパフォーマンスとのこと
https://github.com/react-hook-form/performance-compare
ハイパフォーマンス理由
React Hook Formでは非制御コンポーネントによってregister関数をrefで実行している
このアプローチにより、ユーザーからの入力や値の変更により発生する再レンダリングの量を削減している
コンポーネントのページへのマウントも制御されていないことによりはるかに高速とのこと
非制御コンポーネント
制御されたコンポーネントはprops通じて各stateの更新に対するイベントハンドラを書くが、その代わりにrefを使用して DOM からフォームの値を取得するもの
// 制御
<input type="text" value={value} onChange={handleChange} />
// 非制御
<input type="text" defaultValue="foo" ref={inputRef} />
// <input>の値をとるために`inputRef.current.value`を使う
従来のHTMLに少し似ていて、Reactはこの非制御コンポーネントをサポートしている
ただ、制御コンポーネントを推奨しているみたい
https://ja.reactjs.org/docs/uncontrolled-components.html
どちらのタイプのコンポーネントを使用すれば良いかは別で調査したい
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
制御コンポーネントで有名なのはFormikでこちらも別で調査する