[React] <react-useから学ぶ> usePrevious編

github react-use usePrevious

import { useEffect, useRef } from 'react';

export default function usePrevious<T>(state: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = state;
  });

  return ref.current;
}

使用例

処理順

上記のcodesandboxのconsoleに注目してほしい。
buttonをonClick後のlogの出力順が、下記の順になっていたと思う。

1. onClick
2. usePrevious render
3. App render
4. usePrevious useEffect
5. App useEffect
6. @@@@@

useRefの特性

またuseRefの.current配下は変更されてもrerenderされない特性を持つ。

まとめ

上記の処理順と、useRefの配下が変更されてもrerenderされないことを利用して、一つ前のstate(prevValue)を保持することに成功している。