🐷

ReactのuseRefについて調べたメモ

2021/09/22に公開

React

tech

「それ、ReactのuseRefを使えばできるよ」という話が聞こえてきました。
useRefってなんだっけな。と思ったので調べました。

useRefとは何か

React公式によると、以下です。

useRef は、.current プロパティが渡された引数 (initialValue) に初期化されているミュータブルな ref オブジェクトを返します。返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。

うん。よくわかりません。

整理します。

useRefは、ミュータブルなrefオブジェクトを返す。
useRefが返すオブジェクトは、 .currentプロパティが渡された引数に初期化されている。
.currentプロパティが渡された引数は、initialValueと呼ばれる。
useRefが返したオブジェクトは、コンポーネントの存在期間全体にわたって存在し続ける。

文章を分解しました。

ここまでくるとまずは「refオブジェクトとは何か」を理解しないとuseRefを使えないことがわかります。

refオブジェクトとは何か

改めてRefについて調べてみると、React公式で以下のように記載があります。

Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。

つまりは、Refは、レンダリングされたコンポーネントにアクセスする手段です。

useRefとRefをどう扱うか

useRefでRefオブジェクトを取得した後、そのオブジェクトはインスタンス変数のように扱えます。

値を取得したり上書きする場合は、以下のような感じです。

function Timer() {
  const intervalRef = useRef();
  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id; // 上書き
    return () => {
      clearInterval(intervalRef.current); // 参照して実行
    };
  });

  // ...
}

なんとなくわかった気分になってきたので終わります。

参考。

useRefとは何か

refオブジェクトとは何か

useRefとRefをどう扱うか

Discussion