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の値が変更した時の処理を使い分けることができる。

参考サイト

useRef 公式ドキュメント
 useEffectフックのしくみ
 useRef は何をやっているのか