ReactのuseRefの使い方は非推奨なの？適切な利用シーンと注意点を解説

ReactのuseRefについて、「使い方 非推奨」といった言葉を目にすることがあります。この表現は本当に正しいのでしょうか。どんな場面で使うべきで、どこが非推奨扱いにされているのか、最新の情報をもとに詳しく解説します。useRefの基本概念からReactのルール、新しい警告システム、代替手段まで知ることで、安全かつ効率的なReact開発ができるようになります。

React useRef 使い方 非推奨 なケースとは何か

まず最初に、「React useRef の使い方が非推奨」とされるケースとは何かを把握することが重要です。非推奨とは、完全に禁止されているわけではなく、React本体やLintルールで警告されるような“誤用やアンチパターン”を指します。最新のReact仕様およびLint規則では、使い方によってはReactの期待する純粋関数という制約を破ってしまう行為が非推奨とされています。以下に具体例と背景を示します。

ref.current をレンダリング中に読み書きすること

Reactドキュメントおよび最新のLintルールでは、コンポーネントのレンダー関数（描画のための関数実行中）で ref.current を読み取ったり、代入したりすることは非推奨です。レンダーフェーズではDOMが完全に構築されていないため、ref.current が null の可能性があり、不安定な動作や予期しないUIの不整合が起こる可能性があります。レンダリングは純粋な関数であるべきとの設計原則を壊すためです。最新のLintではこのようなコードが警告の対象となるようになっています。React本体のリファレンスでもこの点が明確に記述されています。

レンダリング結果にrefの値を反映させるような使い方

useRef を使って UI に直接影響を与えるようなデータを保持し、そのデータを変更しても再描画を引き起こさずに表示を変えようとするパターンも非推奨です。useRef は状態を保持するためではなく、あくまで副作用・DOM操作・タイマーIDなどのレンダリングに影響しないデータ保持を目的としています。UI表示に関わるデータは useState や props を使うべきというベストプラクティスがあります。

初期化以外の用途で useRef の current に条件付き代入を行うこと

useRef の current プロパティは、初期化のために一度だけ null チェックして値をセットするパターンは例外的に許されていますが、それ以外でレンダリング中に条件に応じて current を変える使い方は予期せぬ再レンダリングの崩壊や、並行モードなどの新しい機構で不安定になります。状態を管理するなら useState や useReducer を使うか、useEffect 内で処理を行うようにするべきです。

React 最新仕様から見る useRef の非推奨ルール

Reactの仕様や関連ツールにおいて、useRef の誤用に対して具体的に警告や禁止ルールが追加されています。最新情報を元に、いつどのような使い方が非推奨となっているかを整理します。

React ドキュメント上の警告と制約

React の公式ドキュメントでは、useRef で生成したオブジェクトの current をレンダリング中に読むあるいは書くことは「純粋性(purity)」を損なう行為として明確に指摘されています。レンダリングフェーズはプロパティや状態、コンテキストに基づいてUIを決定するべきであり、副作用的な操作を行うべきではないとされています。初期値の設定または初回の null チェックによる初期化のみ例外として許されます。

Lint 警告ルールによる制限

最新のLintルールでは react-hooks/refs などの規則があり、ref.current をレンダー時に読み書きするコードに対して警告を発するようになっています。具体的には JSX 内で ref.current を参照してその値をそのまま描画に使う、あるいは render 関数の中で current を変更する行為などです。React バージョンのアップに伴って、このような警告を拒否するケースが増加しています。

React v19 における変更

React の新しいバージョンでは、promptで指摘されたように「Ref values (the current property) may not be accessed during render」というエラーや警告が強化されています。React v19 以降、Lint やコンパイラがこのルールを強め、レンダーフェーズでの current の読み書きが実際にビルドや実行時に問題を引き起こす場合があるとの報告があります。これにより、従来は動いていたパターンが最新設定ではエラーとなることがあります。

どのような使い方が適切か：useRef の正しい利用シーン

非推奨な使い方を理解したうえで、useRef はどのような場面で有効かを把握することが、誤用を避けるうえで重要です。ここでは実際に推奨されている使いどころとその理由を示します。

レンダリングに再描画を伴わない値を保持する場合

タイマーID、前回の props や state の値、コンポーネントの描画外で使うキャッシュなど、 UI を即時変える必要がないデータの保存に適しています。これらはレンダリングのたびに初期化される一般変数ではなく、一意に保たれていなければならないため、useRef を使うことで値をコンポーネント間で持続させられます。しかもそれ自体が再描画を引き起こさないため、パフォーマンスを保つ目的にも役立ちます。

DOM 要素への直接アクセスが必要なとき

入力要素にフォーカスを当てる、スクロールの位置を取得・設定する、キャンバスやアニメーションに手動で触れるときなど、React の宣言的アプローチだけでは対応しきれない操作を伴う場合に useRef は非常に有用です。このような操作は副作用として useEffect や useLayoutEffect を使うことで適切に処理することが望まれます。

パフォーマンスの最適化や重い計算のキャッシュ用途

useRef は、重たい計算オブジェクトを毎回再生成したくない場合や、頻繁な再描画で参照を安定させたい時に活用できます。初期化パターンとして「if current が null のときだけ生成する」形式を使うことで、再レンダリングで無駄な処理を避けつつ安全にオブジェクトを保持できます。こうした使い方なら非推奨ルールに抵触しません。

非推奨とされる使い方と適切な代替方法の比較

ここでは、よくある非推奨パターンと、それに代わる安全な実装例を比較形式で示します。読み手が直し方を理解しやすくなるよう具体的に複数例を挙げます。

最新の React バージョンで追加された警告ルールと開発ツールの対応

React の最新のバージョンでは、以前は黙認されていた使い方に対して、明確に警告を出すしくみが整えられています。Lint ツールやコンパイラが非推奨の用途を検出し、エラーあるいは警告として扱うようになってきています。

react-hooks/refs ルールの自動検出

Lint の react-hooks/refs 規則は、ref.current の読み書きをレンダー内で行っているコードを検出するようになっており、JSX 内で値を用いている場合や return 文で表示に使っているケースを警告します。このルールは最新の React コンパイル環境で導入されており、開発中に非推奨な使い方を見つけやすくなっています。

React Compiler による実行時エラーまたはビルド時エラー

React v19 以降には、非推奨とする useRef の使い方を検出してエラーを出すケースが報告されています。「render 内で current にアクセスすること」が警告からエラーへと扱いが強まっており、Lint 規則だけでなくコンパイル時に拒否されるプロジェクトも増えています。これにより非推奨パターンのコードが本番に持ち込まれることを防ぐ効果があります。

開発体験の向上とベストプラクティスの普及

Docs やブログ記事などでは、useRef の正しい使い方、非推奨扱いされるケース、状態(state)との棲み分けなどが最新事例として共有されています。これにより、開発者コミュニティ全体で誤用が減り、React アプリケーションの品質と安定性が向上しています。

非推奨扱いにされないコードを書くための実践ガイド

では、実際に非推奨ルールに引っかからないようなコードを書くにはどうすればよいか、実践的に押さえておくべきポイントをいくつか示します。

レンダー外での参照操作と副作用フックの活用

DOM操作や ref.current の読み書きが必要な場面では、useEffect あるいは useLayoutEffect を活用することが望ましいです。たとえばフォーカス設定や外部ライブラリとの統合などは、レンダー後のコミットフェーズで処理するべきで、レンダーフェーズに副作用を持ち込まないことが React の純粋性を保つコツです。

UIに依存する値は state で管理する

表示内容に関わる変数や UI の表示パターンを条件分岐に使う値は、useRef ではなく useState（または useReducer）で管理するべきです。フラグ管理、入力値の変更、ユーザーインタラクションによる変更などは状態として扱うことで、React が描画を適切に制御できるようになります。

初期化パターンとその制限を理解する

初期化にのみ ref.current を設定するパターン（たとえば if ref.current が null のときのみ expensiveObject を生成する）は例外的に許されており、再レンダーがあっても処理が一方向に進むため安全性が担保されます。ただしその範囲を超えて、条件付きで毎回 current を書き換えるような使い方は避けるべきです。

よくある誤解と誤用パターンの修正例

useRef を使う際によくある誤解や、それによって起こる問題。そしてそれらをどう修正するかを具体例を交えて示します。

誤解：State と同じく UI に反映されると思っている

useRef は更新してもレンダリングを誘発しないため、UI が更新されないことがあります。「ref を更新したら画面が再描画される」と期待してしまうとバグになることが多いです。この誤解が原因で、ユーザーインターフェースが最新の状態を反映せず、見た目と内部値がずれることがあります。

誤解：何でも useRef で代替できる

複雑なオブジェクト、描画に関する計算結果、表示内容の条件分岐など、「状態(state)」を伴うものまで useRef で置き換えると、React が意図しているデータフロー（宣言的 UI）が乱れ、保守性が低下します。こうした用途は useState や useReducer を使うべきです。

修正例：レンダリング中 ref.current を使っていたコードを改善する

たとえば、レンダー関数内で ref.current を表示しようとしていた場合、代わりに state に値を維持し、useEffect 内で ref.current を読むように変更することで React のルールに準拠させることが可能です。UI表示が state によって制御され、副作用や DOM 操作は effect 内で安全に行われます。

React useRef 使い方 非推奨 と表現されがちながらも許される例外

全ての useRef の使い方が非推奨というわけではなく、特定の条件下では許可あるいは推奨される使い方があります。こうした例外を理解すると、useRef を恐れず、安全に使えるようになります。

初期化用途の例外パターン

先ほど触れたように、ref.current が初期 null のときのみ値を代入するパターン（要するに初期化）については例外として許可されています。この処理がレンダー関数内であっても「初期化のみ」であれば、React の設計上・Lint ルール上問題とされないことが多いです。再レンダーによってその条件が無効になるため、その後のレンダーで変更されないようにすることがポイントです。

DOM ノード参照としての useRef の標準的利用

input や div 要素などを参照して focus を当てたり、スクロール位置を操作したりするとき、ref 属性を使って要素への参照を作り、useEffect で操作するという流れが標準的です。これは React の宣言的 UI モデルを尊重しつつ、imperative な操作を副作用として扱っているため安全かつ推奨されます。

外部ライブラリとの組み合わせやイベントリスナーの保持

外部ライブラリが要求するオブジェクト参照や、addEventListener のコールバック・タイマーID・アニメーション制御オブジェクトなど、React のレンダリングとは独立した処理を扱う場合にも useRef は適しています。これらは UI を直接変えない値であり、レンダー外で操作することが適切です。

まとめ

「React useRef 使い方 非推奨」という表現は、useRef 自体が悪いというより、使い方によって React の設計原則や純粋関数モデルを壊すケースがあり、最新の仕様やツールではそのような使い方に対して警告やエラーが出るようになってきたという意味です。UI の描写に関わるデータは state や props を使い、DOM 参照や副作用、持続性が必要な値などには useRef を適切に使うことが重要です。

具体的には：

• レンダリング中に ref.current を読み書きしない
• ref を UI コントロールの代替として使わない
• 初期化パターンと副作用フックを活用する

これらを守ることで、React アプリケーションの安定性と可読性を維持できます。useRef は適切な場面で使えば強力なツールですので、非推奨とされる使い方を避け、正しい使い方を理解して活用してください。