From 0951c71d05c21f5cd1a98b20690117eae9066fab Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 3 Jan 2020 09:50:22 +0200
Subject: [PATCH] Add usePrevious hook snippet

---
 snippets/usePrevious.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 snippets/usePrevious.md

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 (
+    <div>
+      <p>Current: {value} - Previous: {lastValue}</p>
+      <button onClick={() => setValue(value + 1)}>Increment</button>
+    </div>
+  );
+};
+
+ReactDOM.render(<Counter />, document.getElementById('root'));
+```