React usePrevious hook
Stores the previous state or props.
- Create a custom hook that takes a
value
. - Use the
useRef()
hook to create aref
for thevalue
. - Use the
useEffect()
hook to remember the latestvalue
.
const usePrevious = value => { const ref = React.useRef(); React.useEffect(() => { ref.current = value; }); return ref.current; }; const Counter = () => { const [value, setValue] = React.useState(0); const lastValue = usePrevious(value); return ( <div> <p> Current: {value} - Previous: {lastValue} </p> <button onClick={() => setValue(value + 1)}>Increment</button> </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <Counter /> );