Reactを学んでいると、useRefは「いつ使えばいいのか分かりづらいフック」と感じる人が多いと思います。
useStateとの違いが曖昧なまま使ってしまい、結果的にコードが分かりにくくなるケースも少なくありません。
この記事では、useRefを使うべき場面と、逆に使わないほうがいい場面を整理します。
useRefの本質
useRefは「再レンダリングに影響しない値を保持するためのフック」です。
値が変わってもコンポーネントは再レンダリングされません。
つまり、
「画面表示には直接関係しないけど、コンポーネントの中で保持しておきたい情報」
を扱うのがuseRefの役割です。
useRefを使う代表的な場面① DOMを直接操作したいとき
useRefが最もよく使われるのは、DOMを直接操作するケースです。
例えば、
・特定の入力欄に自動でフォーカスを当てたい
・スクロール位置を制御したい
・アニメーションライブラリと組み合わせたい
こういった処理は、状態管理ではなく「命令的な操作」になります。
Reactの再レンダリングとは独立してDOMに触りたいとき、useRefが自然な選択になります。
useRefを使う代表的な場面② 値は変わるが再描画は不要なとき
useRefは「値は更新したいが、画面は更新したくない」場合にも使われます。
例えば、
・前回の値を一時的に保持しておきたい
・タイマーやインターバルのIDを保持したい
・処理中かどうかのフラグを内部的に管理したい
これらをuseStateで管理すると、値が変わるたびに再レンダリングが発生します。
再レンダリングが不要、もしくは困る場合にuseRefが活きてきます。
onChangeのたびにuseRefを使うべきか？
入力フォームでよくある疑問として、
「onChangeのたびに再レンダリングされるのが嫌だからuseRefを使うべきか？」
というものがあります。
結論としては、基本的には使うべきではありません。
入力値は画面表示やバリデーションなどに直結するため、React的には状態として扱うのが自然です。
useRefで管理すると、UIとデータの整合性が崩れやすくなります。
パフォーマンスが問題になるケースは稀で、多くの場合は設計の見直しで解決できます。
useRefを使わないほうがいい場面
useRefは便利ですが、乱用するとコードの可読性が下がります。
次のような場合は注意が必要です。
・画面表示に影響する値を管理している
・状態の変化をトリガーに処理をしたい
・本来useStateで表現できるロジックを避けている
useRefはあくまで「避難ハッチ」であり、メインの状態管理手段ではありません。
useStateとの使い分けの考え方
迷ったときは、次の基準で考えると判断しやすくなります。
その値が変わったとき、
「画面は更新されるべきか？」
・Yes → useState
・No → useRef
この基準を持っておくと、useRefの使いどきを見失いにくくなります。
まとめ
useRefは「再レンダリングしない値を持ちたいとき」に使うフックです。
DOM操作や内部的な値管理など、Reactの描画サイクルから切り離したい処理で真価を発揮します。
一方で、入力値やUIに直結するデータはuseStateで管理するのが基本です。
「なぜuseRefを使うのか」を説明できる状態で使うことが、きれいなReactコードへの近道です。
