React Hooksの有名な機能にuseEffectがあるが、これは第二引数に変数を指定した場合、componentDidmount時とcomponentDidUpdate時の両方に実行されることになる。
ここで、componentDidMount時とcomponentDidUpdate時で処理を使い分けたいときに便利なのがuseRef。
useRefExample.jsx
import React, {
useState, useEffect, useRef,
} from 'react';
export const useRefExample = () => {
const [stateA, setStateA] = useState(null);
const inputRef = useRef(false);
useEffect(() => {
if(inputRef.current) { // inputRefの初期値はfalseなので初回レンダリング時には実行されない
console.log('componentDidUpdate!');
} else {
console.log('componentDidMount!'); //初回レンダリング時のみこのelseブロックの中が実行される
inputRef.current = true //inputRefの値がtrueに切り替わるため、2回目以降useEffectが実行されるとき(componentUpdate)はif文のブロックの中が実行される
}
}, [stateA]) // 副作用はstateAに依存する
return (
<input
ref={inputRef}
value={stateA}
onChange={e => setStateA(e.target.stateA)}
/>
);
}
useRefで宣言した変数inputRefを、useEffectのelseブロック内でfalseからtrueに書き換える。そうすることで初回レンダリング後とstateAの値が変更した時の処理を使い分けることができる。