すべてのカテゴリ

Reactを学んでいると、useRefは「いつ使えばいいのか分かりづらいフック」と感じる人が多いと思います。useStateとの違いが曖昧なまま使ってしまい、結果的にコードが分かりにくくなるケースも少なくありません。この記事では、useRefを使うべき場面と、逆に使わないほうがいい場面を整理します。useRefの本質useRefは「再レンダリングに影響しない値を保持するためのフック」です。値が変わってもコンポーネントは再レンダリングされません。つまり、「画面表示には直接関係しないけど、コンポーネントの中で保持しておきたい情報」を扱うのがuseRefの役割です。useRefを使う代表的な場面① DOMを直接操作したいときuseRefが最もよく使われるのは、DOMを直接操作するケースです。例えば、・特定の入力欄に自動でフォーカスを当てたい・スクロール位置を制御したい・アニメーションライブラリと組み合わせたいこういった処理は、状態管理ではなく「命令的な操作」になります。Reactの再レンダリングとは独立してDOMに触りたいとき、useRefが自然な選択になります。useRefを使う代表的な場面② 値は変わるが再描画は不要なときuseRefは「値は更新したいが、画面は更新したくない」場合にも使われます。例えば、・前回の値を一時的に保持しておきたい・タイマーやインターバルのIDを保持したい・処理中かどうかのフラグを内部的に管理したいこれらをuseStateで管理すると、値が変わるたびに再レンダリングが発生します。再レンダリングが不要、もしくは困る場合にuseRefが活きてきます。onCh