usePreviousState React hook

$usePreviousState.txt

#

usePreviousState.js

import React, { useRef } from 'react'

export default function usePreviousState(value) {
    const currentRef = useRef(value)
    const previousState = useRef()

    if (currentRef.current !== value) {
        previousState.current = currentRef.current
        currentRef.current = value
    }

    return previousState.current
}

UsePreviousStateExampleComponent.jsx

import usePreviousState from '@/hooks/usePreviousState/usePreviousState'
import React, { useState } from 'react'

export default function UsePreviousStateExampleComponent() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState('Jimbo')
    const previousCount = usePreviousState(count)

    return (
        <div>
            <div>
                {count} - {previousCount}
            </div>
            <div>{name}</div>
            <button
                onClick={() => setCount((currentCount) => currentCount + 1)}>
                Increment
            </button>
            <button onClick={() => setName('Jane Doe')}>Change Name</button>
        </div>
    )
}