React usePrevious hook
React, Hooks, State, Effect · Nov 16, 2020
Stores the previous state or props.
- Create a custom hook that takes a
value. - Use the
useRef()hook to create areffor 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.render(<Counter />, document.getElementById('root'));
