ツクログネット

【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

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

この記事をシェアする

関連する記事