😽
useRefとは
useRef の使い道
コンポーネントで何か情報を記憶しておきたい時に、useState を使いたいと思いますが、
useState で情報を保存するとき、再レンダリングが走ります。
その再レンダリングを起こしたく無い時に useRef を使います。
How to use useRef
コンポーネント内で useRef フックを呼び出し、参照する初期値を唯一の引数として渡します。
たとえば、値 0 への参照は次のとおりです。
const ref = useRef(0);
useRef()を実行すると下のようなオブジェクトが返却されます。
{
current: 0; // The value you passed to useRef
}
プロパティを介してその参照の現在の値にアクセスできます。このオブジェクトは意図的に変更可能です。
書き込みができます。
import { useRef } from "react";
export default function Counter() {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert("You clicked " + ref.current + " times!");
}
return <button onClick={handleClick}>Click me!</button>;
}
こうして使うことができます。
現在数字を扱っていますが、文字列オブジェクト関数などなんでも扱うことができます。
stateとは異なり、refは単なるJavaScriptオブジェクトです。
Discussion