【React】useRefを理解する

本記事の目的

• React HooksのuseRefとは何かを理解する
• useRefの使い道を理解する

まずは結論

useRefとは、「値の更新による再レンダリングが実行"されない"値を定義できるヤツ」です。

実際に格納されている値にはcurrentプロパティを介してアクセスします。

const myRef = useRef<number>(1);

console.log(myRef.current); // 1

詳しく解説

通常、useStateを使って状態を管理すると、その状態が変更されるたびにコンポーネントが再レンダリングされます。

それに対してuseRefは、値が更新されてもコンポーネントの再レンダリングを実行しないという特徴があります。頻繁に更新される値や、再レンダリングを引き起こすことなく参照を保持したい場合に使われます。

特定のDOM要素への『参照』を保持する

useRefはDOM要素への参照を保持する際によく利用されます。

例えば、要素にフォーカスを当てる、スクロール位置を調整する、要素のサイズを取得するなどの操作はDOM要素への参照を通して行う必要があります。

プレーンなJavaScriptでDOM要素を参照する際には、document.getElementById等のメソッドを使用しますが、ReactではuseRefを使用します。

以下の例では、useRef<HTMLInputElement | null>(null)で作成したinputRefを、テキストフォームのrefに指定することで、inputRefを通してテキストフォームのDOM要素へ直接アクセスできるようにしています。
そして初期処理の中でfocusメソッドを実行することで、inputRefと関連付いたテキストフォームをフォーカス状態にしています。

export const HelloWorld: React.FC = () => {
  const [name, setName] = useState<string>("");
  const inputRef = useRef<HTMLInputElement | null>(null); // Refを作成

  useEffect(() => {
    inputRef.current?.focus(); // フォーカスを当てる
  }, []);

  return (
    <>
      <input
        type="text"
        placeholder="Enter your name"
        ref={inputRef} // inputRefとの関連付けをする
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </>
  );
};