🔥

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で管理していないので再レンダリングは発生せず、コンソールのみでのカウントアップになります。

この特徴を活かすことで、再レンダリングしたくないけど値は更新したいときなど、レンダリングを制御することもできます。
https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

コンポーネントに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にだいぶ慣れてくると使うシーンは多いので参考にしてみてください。

参考文献

https://ja.reactjs.org/docs/hooks-reference.html#useref
https://ja.reactjs.org/docs/refs-and-the-dom.html
https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
https://zenn.dev/dove/articles/e2d962e9d69e20

GitHubで編集を提案

Discussion