useEffect の中で以前の state を取得する方法

別に useEffect に限定した方法でもないがユースケース的には以前の値と今の値を比べてゴニョゴニョすることは大体 useEffect だと思う。

例

useEffect(() => {
  // こんな感じのことやりたい
  if(prev.count - 1 === count) {
    // do something
  }
}, [count])

ただ、この useEffect では componentDidUpdate のように prevState が引数に入ってこない。前回の state を保持する用の state 持つのもなんかめんどくさいしな〜と思っていたところなんと公式ドキュメントにお手製 hooks による解決策が書いてあった。

こんな感じの hooks を用意する。

function usePrevious(value: any) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

引数の value には以前の値を取得しておきたい state を入れておく。使う側ではこんな感じになる。

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  useEffect...
}

ref をDOMにしか使ったことない身としては初見では違和感満載だったが、どうやら ref は props, state など計算が走る値にはなんでもつけられるらしい。正直どうやって動いているのかよく分かっていないのでまた今度勉強してみたい。