ブロックを使うと prevValue を使うフックが書きやすい

小技。

「一時的な変数を useRef で定義したい」といった時に便利なテクニックです。

{
  const prevValue = useRef(value);
  useEffect(() => {
    if (prevValue.current === value) return;
    // 変化したタイミングで行う処理
    prevValue.current = value;
  }, [value]);
}

やり方は簡単です。↑こうやってブロック({})で囲むだけです。コレで prevValue のスコープを狭められます。フックのルールにも抵触しません。

値の変化を検知して副作用を実行したいときに僕はよくこの書き方をします。

conclusion

カスタムフックに抜き出すほどでもないときに便利なテクニックですが、慣れるまではすごく違和感ある書き方だと思います。チームに導入する時などはお気をつけください。