🔥
useRef 使い方の基本
今回は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にだいぶ慣れてくると使うシーンは多いので参考にしてみてください。
参考文献
Discussion