🐷

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

2021/09/22に公開

「それ、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); // 参照して実行
    };
  });

  // ...
}

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

参考。

https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

Discussion