useRef

const ref = useRef(initialValue)

• リファレンス
  • useRef(initialValue)
• 使用法
  • ref を使用して値を参照する
  • ref で DOM を操作する
  • ref �?値�?再生成を防ぐ
• トラブルシューティング
  • 独自コンポーネントへ�? ref を取得できない

リファレンス

useRef(initialValue)

コンポーネント�?トップレベルで useRef を呼び出して、ref を�?�言します。

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

さらに例を見る

引数

• initialValue: ref オブジェクト�? current プロパティ�?初期値として設�?�する値です。任意�?型�?値を指�?�できます。こ�?引数は 2 回�?以降�?レンダーでは無視されます。

返り値

useRef は、以下�? 1 つ�?プロパティだけを持つオブジェクトを返します。

• current: 渡した initialValue が初期値に設�?�されます。あとから別�?値に変更することができます。ref オブジェクトを JSX ノード�? ref 属性として React に渡すと、React は current プロパティ�?値を設�?�します。

2 回�?以降�?レンダーでは、useRef は同じオブジェクトを返します。

注意点

• ref.current プロパティは書き換えが可能です。つまり state と違いミュータブル (mutable) です。ただし、レンダーに利用されるオブジェクト（state �?一部など）を保持している場合は、変更すべきではありません。
• ref.current プロパティを変更しても、React はコンポーネントを再レンダーしません。ref はただ�? JavaScript オブジェクトです�?で、変更されたとしても、それを React が知ることはできない�?です。
• 初期化時を除いて、レンダー中に ref.current �?値を読み取ったり書き込んだりしないでください。コンポーネント�?振る舞いが予測不能になります。
• Strict Mode では、純粋でない関数を見つけやすくするために、コンポーネント関数が 2 回呼び出されます。これは開発時�?み�?振る舞いであり、本番には影響しません。各 ref オブジェクトは 2 回生成されますが、そ�?うち�? 1 つは破棄されます。コンポーネント関数が純粋であれば（そうであるべきです）、こ�?振る舞いはロジックに影響しません。

使用法

ref を使用して値を参照する

コンポーネント�?トップレベルで useRef を呼び出し、1 つ以上�? ref を�?�言します。

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...

useRef は、唯一�?プロパティであるcurrentに、指�?�された初期値が設�?�された状態�? ref オブジェクトを返します。

次回以降�?レンダーでも、useRef は同じオブジェクトを返します。こ�?オブジェクト�? current プロパティを書き換えることで情報を保存しておき、あとからそ�?値を読み出すことができます。これは state と似ていますが、大きく違う点があります。

それは、ref を変更しても、再レンダーはトリガされないということです。こ�?ことから、ref は、出力されるコンポーネント�?外見に影響しないデータを保存する�?に適しています。例えば、インターバル�? ID を保持しておき、あとから利用したい場合、ref に保存することができます。ref 内�?値を更新するには、current プロパティを手動で変更します。

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

そして、あとから、ref に保存されているインターバル ID を読み出すことができます。これでインターバルをクリアする関数を呼び出し、インターバルを削除できます。

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

ref を使用することで、次�?ことが保証されます。

• レンダーを跨いで情報を保存できます（通常�?変数は、レンダーごとにリセットされます）。
• 変更しても再レンダーはトリガされません（state 変数は、変更すると再レンダーがトリガされます）。
• 保存された情報は、コンポーネント�?インスタンスごとに固有です（コンポーネント�?外側で�?�義された変数は、コンポーネント�?インスタンス間で共有されます）。

ref を変更しても再レンダーはトリガされないため、ref は画面に表示したい情報を保存する�?には適していません。そ�?ような場合は、代わりに useState を使用してください。useRef と useState �?使い分けに関しては、ref と state �?違いを参照してください。

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

ref で DOM を操作する

DOM を操作したい場合、ref を利用することが非常に多いです。React は、DOM へ�?アクセスを組み込みでサポートしています。

最初に、初期値を null に設�?�した ref オブジェクト を�?�言します。

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  // ...

次に、操作したい DOM ノード�? JSX �? ref 属性に、ref オブジェクトを渡します。

  // ...
  return <input ref={inputRef} />;

こ�? DOM ノードが生成され、画面に配�?されると、ref オブジェクト�? current プロパティにそ�? DOM ノードが設�?�されます。これで、<input> �? DOM ノードにアクセスして、focus() �?ようなメソッドを呼び出すことができるようになります。

  function handleClick() {
    inputRef.current.focus();
  }

React は、ノードが画面から削除されると current プロパティを null に戻します。

詳しくは、ref を使用して DOM を操作するを参照してください。

ref �?値�?再生成を防ぐ

React は、初回に渡された ref �?値を保存しますが、それ以降�?レンダーではそ�?値は無視します。

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

new VideoPlayer() �?結果は初回レンダーで�?み利用されますが、すべて�?レンダーで呼び出し自体は発生しています。これは、計�?�コスト�?高いオブジェクトを作成している場合に、無駄が多くなります。

これを解決するために、次�?ように ref を初期化することができます。

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

通常、レンダー中に ref.current �?値を読み取ったり書き込んだりすることは許されていません。しかし、今回�?場合は問題ありません。なぜなら、呼び出し結果は常に同じであり、条件分岐により書き込みは初期化時に�?み�?�行されるため、コンポーネント�?振る舞いが�?�全に予測可能となるからです。

function Video() {
  const playerRef = useRef(null);

  function getPlayer() {
    if (playerRef.current !== null) {
      return playerRef.current;
    }
    const player = new VideoPlayer();
    playerRef.current = player;
    return player;
  }

  // ...

トラブルシューティング

独自コンポーネントへ�? ref を取得できない

以下�?ようにして、独自コンポーネントに ref を渡そうとしている場合、

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

コンソールにこ�?ようなエラーが表示されるかもしれません。

デフォルトでは、独自コンポーネントは、内部�? DOM ノードへ�? ref を公開していません。

これを�?正するには、まず、ref を取得したいコンポーネントを探します。

export default function MyInput({ value, onChange }) {
  return (
    <input
      value={value}
      onChange={onChange}
    />
  );
}

そして、次�?ように forwardRef でラップします。

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

これで、親コンポーネントから ref を取得できるようになります。

詳しくは、別�?コンポーネント�? DOM ノードにアクセスするを参照してください。