💡

【React hooks】useRefについてまとめる

2025/06/26に公開

初めに

こんにちは！React hooksのuseRefについてあらためてまとめようと思い、この記事を書いてます。useRefはどんな目的で使用されているのか、そして基本的な使い方についてまとめていきたいと思います。

useRefとは

useRef は ReactHooks の一つで、主に二つの目的で使用されます。一つ目はDOM要素への直接アクセス、二つ目は再レンダリングを発生させずにミュータブルな値を保持することです。 フォームの入力フィールドにフォーカスを当てたり、スクロール位置を制御したりする際に使用します。

DOMってなーに

以下に詳しくまとめてます！

基本的な構文

typescriptで書いていこうと思います。

インポート

import { useRef } from 'react';

基本的な宣言（型注釈付き）

const refName = useRef<Type>(initialValue);

初期値の設定（型指定あり）

// DOM要素への参照（初期値null）
const inputRef = useRef<HTMLInputElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const divRef = useRef<HTMLDivElement>(null);

// プリミティブ型
const countRef = useRef<number>(0);
const messageRef = useRef<string>('初期メッセージ');
const flagRef = useRef<boolean>(false);

// オブジェクト型
interface UserData {
  name: string;
  age: number;
}
const dataRef = useRef<UserData>({ name: '', age: 0 });

// 配列型
const listRef = useRef<string[]>([]);
const numbersRef = useRef<number[]>([1, 2, 3]);

値へのアクセスと変更

function ExampleComponent(): JSX.Element {
  const myRef = useRef<number>(100);

  // 値の取得
  console.log(myRef.current); // 100

  // 値の変更
  myRef.current = 200;

  // DOM要素への参照の場合
  const inputRef = useRef<HTMLInputElement>(null);
  
  const handleClick = (): void => {
    // null チェックが必要
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.value = 'Hello';
    }
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

DOM要素への参照（各要素の型）

function ComponentWithRef(): JSX.Element {
  // 各HTML要素に対応する型
  const inputRef = useRef<HTMLInputElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const divRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLFormElement>(null);
  const imgRef = useRef<HTMLImageElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  return (
    <div>
      <input ref={inputRef} />
      <button ref={buttonRef} />
      <div ref={divRef} />
      <form ref={formRef} />
      <img ref={imgRef} />
      <canvas ref={canvasRef} />
    </div>
  );
}

useRefとuseStateをくらべてみる

項目	`useRef`	`useState`
再レンダリング	値を変更しても再レンダリングされない	値を変更すると再レンダリングされる
値の変更方法	`ref.current = newValue`（直接変更）	`setState(newValue)`（関数経由）
値の取得方法	`ref.current`（直接アクセス）	`state`（直接アクセス）
初期化	`useRef(initialValue)`	`useState(initialValue)`

つまり。。。。

useRef: DOM操作、値の永続化、パフォーマンス重視の場面で使用
useState: UI状態管理、再レンダリングが必要な値の管理で使用
使い分けの基準: 「その値の変更で画面を更新したいか？」が判断ポイント

useRefのユースケース例

入力フィールドへの自動フォーカス
ビデオの再生・一時停止制御
タイマーIDの保持とクリーンアップ
スクロール位置の制御
Canvas要素での描画操作

まとめ

useRefとは、主にDOM要素への直接アクセスする時や値は変更したいけど、その変更で画面を更新する必要がないという時に使用される。
useRefとuseStateの違いは、useRefは値を変更しても再レンダリングされないが、useStateは値を変更すると再レンダリングされる。

初めに