useRefの使い方：DOM参照・前回値の保持・レンダリングを起こさない値

たける 検索ボックスのクリアボタンを押したあと、自動でinputにフォーカスを戻したいんですが、どうやってDOMに直接アクセスするんですか？

りこ useRefでDOM要素への参照を持つ。`ref={inputRef}` とJSXに渡すと、`inputRef.current` にそのDOM要素が入る。あとは `inputRef.current?.focus()` を呼ぶだけ。

useRefとは

useRef は 再レンダリングを引き起こさずに値を保持する Hookです。

const ref = useRef(initialValue);
// ref.current に値が入る

useState との違いは、ref.current を変更してもコンポーネントが再レンダリングされない点です。

useRefの主なユースケースは3つあります：

1. DOM要素への参照（フォーカス・スクロール・アニメーション）
2. 前回値の保持（変化を検知する）
3. レンダリングをトリガーしない値の管理（インターバルIDなど）

DOM要素への参照

ref をJSX要素に渡すと、ref.current にそのDOM要素が入ります。

function SearchBox() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();  // DOMの focus() を直接呼ぶ
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="検索..." />
      <button onClick={focusInput}>フォーカス</button>
    </div>
  );
}

マウント時に自動フォーカス

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);  // 接続時に開始（開発中のStrictModeでは再接続も確認される）

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

スクロール制御

function ChatWindow() {
  const bottomRef = useRef<HTMLDivElement>(null);
  const [messages, setMessages] = useState<string[]>([]);

  useEffect(() => {
    // 新しいメッセージが来たら一番下にスクロール
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div style={{ height: 400, overflowY: 'scroll' }}>
      {messages.map((msg, i) => <div key={i}>{msg}</div>)}
      <div ref={bottomRef} />  {/* スクロール先のアンカー */}
    </div>
  );
}

動画・音声のコントロール

function VideoPlayer({ src }: { src: string }) {
  const videoRef = useRef<HTMLVideoElement>(null);

  const play = () => { void videoRef.current?.play().catch(console.error); };
  const pause = () => videoRef.current?.pause();

  return (
    <div>
      <video ref={videoRef} src={src} />
      <button onClick={play}>再生</button>
      <button onClick={pause}>一時停止</button>
    </div>
  );
}

表示に使う「前回値」はstateで扱う

refは変更してもレンダーを起こしません。レンダー中にref.currentを読み、それを画面表示の判断に使う汎用usePreviousは、並行レンダリングなどで扱いが難しくなるため、ここでは使いません。

価格の増減を表示したい場合は、価格が変わったことを条件にstateを更新します。次はコンポーネントの定義です。useStateのimportが必要です。

function PriceDisplay({ price }: { price: number }) {
  const [lastPrice, setLastPrice] = useState(price)
  const [difference, setDifference] = useState(0)
  if (price !== lastPrice) {
    setLastPrice(price)
    setDifference(price - lastPrice)
  }
  return <p>価格：{price}円（前回との差：{difference}円）</p>
}

これは同じコンポーネントのstateだけを、priceが変わったときに限って調整する例です。無条件にsetStateするとループします。外部への送信やDOM操作をレンダーに入れてよいという意味ではありません。

React公式：前回のレンダーから情報を保存する

レンダリングをトリガーしない値の管理

タイマーIDや外部ライブラリのインスタンスなど、レンダリングに影響しない値を保持するのに適しています。

function Stopwatch() {
  const [elapsed, setElapsed] = useState(0);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const start = () => {
    if (intervalRef.current !== null) return;
    intervalRef.current = setInterval(() => {
      setElapsed((prev) => prev + 100);
    }, 100);
  };

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

  const reset = () => {
    stop();
    setElapsed(0);
  };

  // クリーンアップ
  useEffect(() => () => {
    if (intervalRef.current !== null) clearInterval(intervalRef.current);
  }, []);

  return (
    <div>
      <p>{(elapsed / 1000).toFixed(1)}秒</p>
      <button onClick={start}>スタート</button>
      <button onClick={stop}>ストップ</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}

インターバルIDを useState で管理すると、IDが変わるたびに再レンダリングが起きてしまいます。useRef を使うことで無駄な再レンダリングを防げます。

useStateとuseRefの使い分け

// ❌ レンダリング不要な値にuseStateを使う（無駄な再レンダリング）
const [timerId, setTimerId] = useState<number | null>(null);

// ✅ useRefを使う
const timerIdRef = useRef<number | null>(null);

forwardRefでrefを子コンポーネントに渡す

React 19では関数コンポーネントのpropsとしてrefを受け取れます。次はReact 18との互換を保つforwardRefの例です。

import { forwardRef } from 'react';

type InputProps = {
  label: string;
  placeholder?: string;
};

// forwardRef でrefを受け取れるようにする
const LabeledInput = forwardRef<HTMLInputElement, InputProps>(
  ({ label, placeholder }, ref) => (
    <div>
      <label>{label}</label>
      <input ref={ref} placeholder={placeholder} />
    </div>
  )
);

// 使い方
function Form() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <LabeledInput ref={inputRef} label="名前" placeholder="入力してください" />
      <button onClick={() => inputRef.current?.focus()}>フォーカス</button>
    </div>
  );
}

たける `useRef` と `useState` の根本的な違いがいまいちわかってなくて。どちらも値を保持しますよね。

りこ stateが変わると再レンダリングが起きる。refが変わっても起きない。「画面に反映する値はstate、内部処理だけで使う値はref」。タイマーのID・前回値・DOM参照はrefに入れる。

まとめ

• useRef は再レンダリングを起こさずに値を保持する
• DOM要素への参照（フォーカス・スクロールなど）に使う
• 前回値の保持や、タイマーIDなどレンダリング不要な値の管理に適している
• UIに反映する値は useState、内部で使うだけの値は useRef

次の第8回では、重い計算結果をメモ化して再計算を防ぐ useMemo を学びます。

確認してみる

スタートを連打してもタイマーが増殖しないか、画面を外した後に止まるか確認する。この加算式は正確な時計ではなく通知回数の学習例。

仕様・手順の参照先