A hook that stores the previous state or props.
- Create a custom hook that takes a
value
. - Use the
React.useRef()
hook to create aref
for thevalue
. - Use the
React.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'));