下記の 2 パターンで利用する；
- DOM ノードの参照を持つときに使う（e.g.
<input ref={ref} />） - re-render を走らせたくない変数に使う（e.g. タイマー ID）
DOM ノードの参照を持つときに使う
ja.reactjs.org/docs/hooks-reference.html#useref
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
re-render を走らせたくない変数に使う
ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
// ...
}
関数コンポーネントにおける、クラスのインスタンス変数として使える。
useRef はオブジェクトを作ってその参照を返すので、intervalRef.current の値を変更しても、intervalRef 自体が変更されないことから、re-render が走らない。この性質を利用して、クラスコンポーネントにおけるインスタンス変数のようなものとして扱うことができる。