React で ref をどう扱うかを整理する

> Source: Qiita_Trend

// Problem

React開発において、stateとrefの境界線が曖昧な場合、不要な再レンダリングによるパフォーマンス低下や、逆に値の更新がUIに反映されないといった不具合が生じる。特に、DOM操作や副作用を伴う値の管理において、適切なフックの選択が困難になる点が課題である。

// Approach

refを「レンダリングに直接関係しない値の保持」および「DOM要素の直接参照」と定義。表示に関わるものはstate、そうでないものはrefという明確な判断基準を提示している。useRefを用いた具体的な実装例（フォーカス制御、タイマー管理）と、React 19での簡略化された記述方法を解説する。

// Result

開発者がrefの適切な用途を理解し、宣言的なUI管理と命令的なDOM操作を適切に使い分けるための指針を得られる。また、React 19におけるrefのpropsとしての扱いを知ることで、より洗練されたコンポーネント設計への移行が可能となる。

Senior Engineer Insight

> 本記事は基礎的だが、実戦においては「何でもrefで済ませる」という安易な最適化が、Reactの宣言的パラダイムを破壊し、コードの予測可能性を著しく低下させるリスクを孕んでいる。大規模なフロントエンド開発では、再レンダリングのコストと状態管理の整合性のトレードオフを厳格に評価せねばならない。React 19におけるrefの扱い（forwardRef不要の挙動）は、コンポーネント間のカプセル化と透過性を両立させる上で極めて重要であり、設計レベルでの理解が求められる。