useRef — その概要、参照フック、ReactにおけるDOM操作

ReactにおけるuseRefとは

useRef はReact 16.8で追加されたフックで、単一の.currentプロパティを持つミュータブルなrefオブジェクトを返します。初期値はコンポーネントのマウント時に.currentに割り当てられます。通常の変数との主な違いは、refオブジェクトが再レンダリングを生き残ることです。後続のレンダーでは、Reactはrefを再作成せず、同じオブジェクトを返します。

内部的には、useRef はuseStateやuseEffectと同じメカニズム（ファイバーノード上のフックのリンクリスト）を使用します。ただし、useStateとは異なり、Reactはrefオブジェクトの変更を追跡せず、更新をキューに入れず、再レンダリングをスケジュールしません。これにより、useRefは頻繁な変更下でもパフォーマンスに影響を与えない、非常に軽量なフックになります。

Reactチーム — Hooks FAQ（2025年） によると、useRefは基本的に値を保存する「箱」です。シンタックスシュガー：const ref = useRef(initialValue) は const ref = { current: initialValue } と同等ですが、Reactがすべてのレンダーで同じrefオブジェクトを保証する点が異なります。魔法ではなく、Reactによって管理される安定した参照にすぎません。

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 初期状態
    // countRef.current = 5 変更後
    // 再レンダリングは発生しません！
}

useRefによるDOM要素へのアクセス

useRef の最も一般的なユースケースは、DOM要素への直接アクセスを取得することです。Reactはコンポーネントのマウント後に、elementRef.currentにDOMノードへの参照を割り当てます。これは、inputへのフォーカス、要素の寸法測定、アニメーションライブラリやReactレンダリングを使用しないライブラリとの統合に必要です。

Reactは自動的にDOM上のref参照を管理します。マウント時に実際のDOMノードを割り当て、アンマウント時にnullにします。これにより、.currentが常に最新の値を保持し、削除された要素へのぶら下がり参照によるメモリリークを防ぎます。手動でのクリーンアップは不要です。

function AutoFocusInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        // コンポーネントマウント後に入力をフォーカス
        inputRef.current?.focus();
    }, []);

    return <input ref={inputRef} type="text" />;
}

React — Refs and DOMドキュメント（2025年） によると、宣言的操作（モーダルの開閉、可視性の管理）にはrefを使用しないでください。これらの目的にはstateとpropsを使用します。refは、宣言的に表現できない命令的操作（フォーカス、テキスト選択、サードパーティライブラリとの統合）を目的としています。

再レンダリングなしでミュータブルな値を保存する

2番目に重要なユースケースは、レンダー間で保持する必要があるが、変更によって再レンダリングをトリガーすべきではない任意の値を保存することです。典型的な例：タイマー識別子（setInterval/setTimeout）、リクエストキャンセルフラグ、比較用の以前のprops値、UI出力に影響しないデータ。

これはuseEffectで特に便利です。useRefはタイマー識別子を保存し、クリーンアップでそれをクリアします。timerIdがuseStateに保存されている場合、setTimerIdを呼び出すたびに、ロジックにもUIにも不要な再レンダリングが発生します。useRefはオーバーヘッドなしで、不要な再レンダリングなしでこの問題を解決します。

function Timer() {
    const intervalRef = useRef(null);

    const start = () => {
        intervalRef.current = setInterval(() => {
            console.log('ティック');
        }, 1000);
    };

    const stop = () => {
        clearInterval(intervalRef.current);
    };

    useEffect(() => stop, []);

    return <><button onClick={start}>Start</button><button onClick={stop}>Stop</button></>;
}

useRef vs useState：それぞれの使用タイミング

主なジレンマ — useRef と useStateの選択 — は1つの質問で解決します。「値が変更されたときに再レンダリングが必要か？」。はい — useState。いいえ — useRef。useStateはコンポーネントの出力に影響する状態を保存します。useRefは内部ロジックに必要なデータを保存しますが、UIには影響しません。

実際には、開発者はクロージャの問題を避けるためにコールバックを保存する目的でuseRefをよく使用します。例えば、useEffectがイベントを購読し、コールバックが現在のstateを必要とする場合、コールバックをuseRefに保存します。各レンダーでref.currentを新しい関数で更新すると、エフェクトは再購読せずに常に新しいコールバックを呼び出します。

アンチパターンがあります。JSXで必要なデータにuseRefを使用し、その変更で再レンダリングを発生させたくない場合です。これにより非同期が発生します — ref.currentが既に新しいのにUIは古いデータを表示します。値がUIに表示される場合はuseStateを使用します。内部でのみ使用される場合はuseRefを使用します。

useEffectと組み合わせたuseRef

useRef + useEffectの組み合わせは、以前のprops値を追跡する標準的なパターンです。以前の値をrefに保存し、useEffectで現在の値と比較し、差分に基づいて決定を行います。これは、変更前の値を知る必要があるアニメーションで特に有用です。

function PriceDisplay({ price }) {
    const prevPriceRef = useRef(price);

    useEffect(() => {
        const prevPrice = prevPriceRef.current;
        if (price > prevPrice) {
            animateUp();
        } else if (price < prevPrice) {
            animateDown();
        }
        prevPriceRef.current = price;
    }, [price]);

    return <span>${price}</span>;
}

Reactドキュメント — Hooks FAQ（2025年） によると、このパターンは「以前の値パターン」と呼ばれます。useRefがレンダー間で値を保持し、useEffectが変更の確定後に実行されるため機能します。最初にDOMが新しいpriceで更新され、次にuseEffectがそれを（まだrefにある）以前の値と比較し、ref.currentを現在の値に更新します。

useRefのよくある間違い

最も頻繁な間違いは、JSXを計算するためにレンダーフェーズでref.currentを読み取ることです。ref.currentの変更は再レンダリングを引き起こさないため、コンポーネントは古い値を使用する可能性があります。.currentがUI出力に関与する場合はuseStateを使用します。refとstateを同期する必要がある場合は、useEffectを使用してrefからstateを更新します。

• JSX内のRef — レンダー関数内でref.currentを読み取ると、UIとデータの非同期が発生します。
• useEffectの依存関係としてのRef — ref.currentは依存配列に含めるべきではありません。Reactはその変更を追跡しません。
• nullチェックの忘れ — アンマウント時にref.currentはnullになります。アクセス前に確認してください。
• refへの関数の保存 — 新しいコールバックパターンを使用する場合は、各レンダーでref.currentを更新してください。

// ❌ 表示のためにレンダー中にref.currentを読み取らないでください
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // 変更時に更新されません
}

// ✅ 表示にはstate、ロジックにはrefを使用
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

もう1つのよくある間違いは、データが実際にUIに影響を与える場合に、コンポーネントの状態を保存する唯一の方法としてuseRefを使用することです。開発者は「不要な」再レンダリングを避けるためにuseRefを選択しますが、結果として更新されないUIを得ることになります。正しいアプローチ：UIデータにはuseStateを使用し、レンダリングに関与しない補助的な値にのみuseRefを使用します。