特徴
値が更新されても差分検知されないこと。
よく使われるケース
formでinput入力時のレンダリングを防ぐ目的で使われます。useRefを利用してレンダリングを抑えたライブラリが「react-hooks-form」です。
なお、useRefはDOMの参照に限らずなんでも好きなものを入れることができます。なので再レンダリングを起こしたくないけど値の更新はしたいなどのパフォーマンスチューニングにも使えたりします。(例えば、timerやAPI送信時の値など）
後は、純粋にReactから生DOMに対して命令(通常のJavaScriptAPI)を実行したい場合などによく使われます。（例えば、clientHeightで生DOMの高さを取得してCSSの制御を加えるなど）
注意点
フォームの入力であればあくまでサブミット時にバリデーションを行うという挙動になってしまうので、入力中にリアルタイムでバリデーションを行いたいなどの要件がある場合は少しカスタマイズしなければならくなってしまうので気を付けましょう。
サンプル
公式サイトに載っているサンプルになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } |
input要素のref属性にuseRefで宣言した値を設定します。そうすることでinput要素への関連付けをすることが可能です。
要は、ソース内のinputElという変数経由でinput要素へのアクセスが可能になります。
なお、サンプルには記述はしていませんが、Reduxを使っている場合などは、POSTボタンを押した際などにuseRefで取得した保持している値（inputEl.current.value）をそのままdispatchして値を格納します。
この記事へのコメントはありません。