useRef

useRef は、新しいレンダーをトリガしないようにしたい時に使用します。 また、useStateのようにコンポーネント内での値を保持することが出来ます。

基本

const refObject = useRef(initialValue)

//例
const number = useRef(100);
console.log(number.current); // 100

cuseRefは、.currentプロパティが渡された引数（初期値はinitialValue）をrefObjectへ返します。 この引数の値が書き換え可能な.currentプロパティーの値であり、.currentプロパティ内に保持することができます。

useRefとuseState

useRefを利用するとtextのstate更新時にのみコンポーネントの再レンダリングが発生します。

const App = () => {
  const inputEl = useRef(null);
  const [text, setText] = useState("");
  const handleClick = () => {
    setText(inputEl.current.value);
  };
  console.log("レンダリング！！");
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={handleClick}>set text</button>
      <p>テキスト : {text}</p>
    </>
  );
};