レンダーをまたいで値を保持できるミュータブルなオブジェクトを返す。DOM要素への参照取得と、再レンダーを起こさない値の保持に使われる。
const ref = useRef<T>(initialValue)
// DOM要素への参照
const inputRef = useRef<HTMLInputElement>(null);
// 任意の値の保持（再レンダーなし）
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);import { useRef, useEffect } from 'react';
function AutoFocusInput() {
// DOM要素への参照
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
return <input ref={inputRef} placeholder="自動フォーカス" />;
}
// 再レンダーなしで値を保持する例
function StopWatch() {
const [time, setTime] = useState(0);
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const start = () => {
intervalRef.current = setInterval(() => {
setTime(t => t + 1);
}, 100);
};
const stop = () => {
if (intervalRef.current) clearInterval(intervalRef.current);
};
return <div>{time} <button onClick={start}>開始</button><button onClick={stop}>停止</button></div>;
}ref.current の変更は再レンダーを起こさない。「前回の値を覚えておきたい」ケースにも usePrevious パターンとして活用できる。