useRefを理解する

useRefとは

useRefは、レンダー時には不要な値を参照するためのフックです。

注意点

• ref.currentはstateと違って変更が可能で、レンダーを跨いだ情報の保存ができます
• ref.currentを変更しても再レンダーされません
• レンダー中にref.currentの値を読み取ったり書き込んだりするとコンポーネントの振る舞いが予測不能になります

使い方

const initialValue = 100;
const ref = useRef(initialValue);
console.log(ref.current); // 100

const countUp = () => {
  ref.current += 100;
  console.log(ref.current); // 200
};

return (
  <>
    <button onClick={countUp}>useRef</button>
      {/* 画面は再レンダリングされないため100のまま */}
      <div>{ref.current}</div> 
    </div>
  </>
);

refは、変更しても画面上の値が変わらないため、外見に影響しないデータを保持することに適しています。

DOMの操作

操作したいDOMノードのJSXのref属性にrefオブジェクトを渡すとcurrentプロパティにそのDOMノードが設定されます。
下記の例では、ボタンをクリックするとinputにフォーカスが当たります。

使い方

  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current?.focus();
    console.log(inputRef.current);
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Click</button>
    </div>
  );

参考
useRef：https://ja.react.dev/reference/react/useRef
refでDOMを操作する：https://ja.react.dev/learn/manipulating-the-dom-with-refs

小コンポーネントを親コンポーネントに公開：
https://ja.react.dev/reference/react/forwardRef