🔥

useRef 使い方の基本

2022/06/24に公開

今回はuseRefの使い方について触れていきたいと思います。

Dom特有のAPIを使いたい場合


const App: React.FC = () => {
  const inputDom = useRef<HTMLInputElement | null>(null);

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

  return (
    <div className="App">
      <input type="text" ref={inputDom} />
    </div>
  );
};

初期値をnullで宣言しつつ、refでdomにアクセスしてfocus()を使用しています。
この場合、DOMが表示された直後にinputにフォーカスが当たる仕様です。

汎用コンテナとしてのuseRef

const App: React.FC = () => {
  const num = useRef<number>(0);

  const countUp = () => {
    num.current += 1;
    console.log(num.current);
  };

  return (
    <div className="App">
      <button type="button" onClick={countUp}>
        count up
      </button>
      {num.current}
    </div>
  );
};

今回はカウントアップ機能を作ってみました。
ここで注意点なのは、stateで管理していないので再レンダリングは発生せず、コンソールのみでのカウントアップになります。

この特徴を活かすことで、再レンダリングしたくないけど値は更新したいときなど、レンダリングを制御することもできます。

コンポーネントにrefを渡したいとき

forwardedRefを使うことで、自作のコンポーネントにrefを渡すことができます。
ジェネリクスの第一引数はrefの型、第二引数はPropsの型です。

import React from "react";

type Props = {
  num: number;
};

export const RefTest = React.forwardRef<HTMLDivElement, Props>(function refTest(
  { num },
  ref
) {
  return <div ref={ref}>{num}</div>;
});

まとめ

Reactにだいぶ慣れてくると使うシーンは多いので参考にしてみてください。

参考文献

GitHubで編集を提案