useRef

公式ドキュメント ↗

const inputRef = useRef<HTMLInputElement>(null);

<input ref={inputRef} />
<button onClick={() => inputRef.current?.focus()}>フォーカス</button>
<button onClick={() => read(inputRef.current?.value)}>読み取る</button>

値を変えても、画面は描き直されない

const countRef = useRef(0);
countRef.current += 1; // 値は変わるが、再レンダリングは起きない

同じ「+1」でも、useStateは画面がすぐ更新される。refは「画面の描き直しサイクルの外」にある、値をしまっておくだけの箱。変化を画面に映す必要がなく、ただ覚えておきたいだけの時に使う。

ひとつ前の値を覚えておく

function usePrevious(value) {
  const ref = useRef(undefined);
  useEffect(() => {
    ref.current = value; // 描画が終わった"後"に更新するので、常に1つ前の値が残る
  }, [value]);
  return ref.current;
}

useEffectは画面が描き直された「後」に実行されるので、refへの書き込みを1テンポ遅らせられる。これを利用すると「1つ前の値」を保持できる。差分検知やアニメーションのトリガーなどに便利。