ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

【React hooks】stateの1つ前の状態を取得するカスタムフックを作成する

eye catch

usePreviousValue

stateの1つ前の状態を取得するカスタムフックusePreviousValueを作成します。

usePreviousValue.js

import { useRef, useEffect } from 'react'

const usePreviousValue = value => {
    const previousValue = useRef(0);

    useEffect(() => {
        previousValue.current = value
    }, [value])

    return previousValue.current
}

export default usePreviousValue

valueには一つ前の値を得たいステートを与えます。usePreviousValueフックが呼び出されると、useEffectによってステートが変化する度にpreviousValueに変化後のステートが入ります。このpreviousValueが1つ前のステートとなります。

使用例

usePreviousValueフックをアプリ内で使用した例です。+ボタンを押すとステートcountがカウントアップされ、遅れてprevCountもカウントアップされます。

App.js

const App = () => {
    const [count, setCount] = useState(0)
    const prevCount = usePreviousValue(count)
    const handleClick = useCallback(() => setCount(prev => prev + 1), [])
    return (
        <div className="App">
            <div>
              <div>count: {count}</div>             
              <div>prevCount: {prevCount}</div>
            </div>
            <button onClick={handleClick}>+</button>
        </div>
    )
}

DEMO

下記で実際の動作を確認してください。