diff --git a/snippets/usePrevious.md b/snippets/usePrevious.md new file mode 100644 index 000000000..c4323a131 --- /dev/null +++ b/snippets/usePrevious.md @@ -0,0 +1,36 @@ +--- +title: usePrevious +tags: hooks,state,effect,intermediate +--- + +A hook that stores the previous state or props. + +- Create a custom hook that takes a `value`. +- Use the `React.useRef()` hook to create a `ref` for the `value`. +- Use the `React.useEffect()` hook to remember the latest `value`. + +```jsx +const usePrevious = value => { + const ref = React.useRef(); + React.useEffect(() => { + ref.current = value; + }); + return ref.current; +} +``` + +```jsx +const Counter = () => { + const [value, setValue] = React.useState(0); + const lastValue = usePrevious(value); + + return ( +
+

Current: {value} - Previous: {lastValue}

+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('root')); +```