useRef は元々あった createRef の hooks 版です。その名の通り、DOMに対する参照を持つために使われるのが主な目的です。

ですがそれ以外の用途にも利用することができます。

最初に私が知ったのはこちらのReact本体のドキュメントにも記されている「以前のstateの値を参照する方法」です
https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

function usePrevious(value: any) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

なにやら useRef で前回の値を保持しているようですね。それまで ref と言えばDOMに対して使うものと思っていたので「え、useRefってDOM以外の値を参照するのに使えるの？」と驚きました。驚きましたが当時の私はとりあえずスルーしました。

次に出会ったのがこちらの記事のこの節。

特に気になったのが次の useRef の特徴です。

Stores data

Does not cause re-render when the data it stores changes
Remembers its stored data even after state change in useState causes a re-render.

気になったものの、この記事を読んだ当時の私は useRef の詳細については華麗にスルーしました。

ですが日々開発していて、たま〜〜〜に useRef をDOM以外に使ったテクを見かけるので、今回深ぼろうと思った次第です。

なのでこの記事では次のようなことを書きます。

useRef は具体的になにをしているのか
どんなユースケースが考えられるか

useRef は具体的になにをしているのか

実際の実装を見てみましょう。

まずは初期化の処理から。

function mountRef<T>(initialValue: T): {|current: T|} {
  const hook = mountWorkInProgressHook();
  const ref = {current: initialValue};
  if (__DEV__) {
    Object.seal(ref);
  }
  hook.memoizedState = ref;
  return ref;
}

単純に useRef() の引数に入ってきた値を代入しているだけですね。なにも難しいことはないです。次に初期化以降の再描画の時を見てみましょう。

function updateRef<T>(initialValue: T): {|current: T|} {
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

これだけです。少な過ぎてこの記事が企画倒れになる気もしましたが、強い気持ちで書き進めます。このコードを読む限り、 useRefは再描画が行われても単純にメモ化された値を返すだけです。

明示的に値を変えたい場合は

const hoge = useRef(null)

const handleSomething = () => {
  hoge.current = "new value"
}

のように明示的に current というプロパティに代入するしかありません。

ここから直感的に冒頭にあった「Does not cause re-render when the data it stores changes」がなんとなく腹落ちした方もいらっしゃるかもしれません。どういうことかと言いますと useRef で保持した値を変える時はただの値の代入でしかないため state を変えるわけではありません。このため再描画が発生しないのです。そしてグローバルな hooks の領域に値が保存されているため、再計算が行われても値は失われません。

どんなユースケースが考えられるか

useRef で値を保持することの特性は「再描画を発生させないこと」これに尽きます。

なのでユースケースとしては

描画には関係のない状態

を扱うために使うのが主となるでしょう。

usePrevious の例は分かりやすいですね。前回の値を保持しておいて、それをコンポーネント内の関数やらの分岐に使うわけです。ただ正直これ以外は私はあまりユースケース思いつかないです。多分ノリ的にはClassコンポーネント時代に、Classのプロパティとして this.xxx という風に扱っていたものと同じな気がするんですが、それもあまりやった覚えがないのでいい具体例が出てこない…。

ただ覚えておいて損はない特性だと思うので、この記事がいつか役に立てると幸いです。