ReactのuseStateで、他のstateのprevStateを取得する方法は？

Question

ReactのuseStateで、

const [hoge, setHoge] = useState();

setHoge(prevState=>[...prevState, newHoge])

のようにすれば、その処理の他の箇所でのhogeの変更も反映できるのですが、例えば

const [hoge, setHoge] = useState();
const [fuga, setFuga] = useState();

setHoge(prevState=>[...prevState, newHoge])

において、setHogeの中でその処理の他の箇所でのfugaの変更を反映することってできるんでしょうか？

Answer 1

こんにちは

毎回の fugaの値を保存しておいて、次回その値をprevFugaとして取り出すには、以下のようにすればよいかと思います。

まず、

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

というカスタムフックを作っておいて、以下のようにこれを使います。

  const [fuga, setFuga] = useState();
+ const prevFuga = usePrevious(fuga);

なお上記のコードは、

• ja.reactjs.org/docs: 前回の props や state はどうすれば取得できますか？

を参考にしています。