目次
UseRef
refオブジェクトを返すフック。
refオブジェクトはコンポーネント内で値を保持できる。
値の保持はuseStateと同じだが、useRefではコンポーネントの再レンダリングが行われない。
そのためレンダーに関係ないstateを扱うときに利用する。
useStateを使うと再レンダリングされるから、画面更新が必要ないときはuseRefでいいんだね
function Counter() {
const countRef = useRef(0);
const increment = () => {
countRef.current += 1;
// ここでは値は変わるが画面上は変わらない
console.log(`Count: ${countRef.current}`);
};
return (
<div>
<p>Count: {countRef.current}</p>
<button onClick={increment}>+1</button>
</div>
);
}
