useRefについて知る

useRef とは何か？

useRef とはレンダリングする必要のない値を参照するためのReactHooksです。
第一引数に初期値を設定し、返却値としてRefオブジェクトが返ります。
Refオブジェクトには元々currentプロパティが備わっています。
current プロパティは変更することができます。
また、Refオブジェクトは変更してもコンポーネントの再描画が起こらないので、JSX内の表示部分などには使用するべきではないです。

const somethingRef = useRef(0)
somethingRef.current // -> 0

useRef を使った実装

以下はインプットフィールドの参照を定義し、フォーカスボタン押下時にその参照へfocusする例です。

import { useRef } from "react";

function InputRef() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        インプットフィールドをフォーカスする
      </button>
    </div>
  );
}
export default InputRef;