React useRef — DOMアクセス、ミュータブル値、前の状態の追跡

useRefによるDOMアクセスとミュータブル値

useRefは再レンダリング間で保持されるミュータブルなrefオブジェクトを返し、変更時に再レンダリングを引き起こしません。

DOM要素へのアクセス

function SearchInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} placeholder="検索..." />;
}

ミュータブル値の保存

状態とは異なり、refの変更は再レンダリングをトリガーしません。永続化が必要だが視覚的な更新を引き起こすべきでない値に最適です。

前の値の追跡

一般的なカスタムフックパターンでは、useRefを使ってpropや状態の前の値を記憶します：

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

重要なルール

• レンダリング中にref.currentを読み書きしない（初期化を除く）-- 並行機能を壊す
• 再レンダリングを引き起こすべき値にはrefを使わず、代わりにstateを使用する