From 0060cac535cdd34e3239839b8ca59eb12e70682f Mon Sep 17 00:00:00 2001
From: Jonathan Carter <minimatrix@gmail.com>
Date: Sun, 4 Oct 2020 23:44:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=95=92=20added=20usePrevious=20hook=20(#3?=
 =?UTF-8?q?3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🕒added usePrevious hook

* added the documentation of usePrevious hook

* added usePrevious hook to Readme

* Bumped up the version.
---
 README.md            |  1 +
 docs/README.md       | 36 ++++++++++++++++++++++++++++++++++++
 hooks/usePrevious.js | 20 ++++++++++++++++++++
 index.js             |  1 +
 package-lock.json    |  2 +-
 package.json         |  2 +-
 6 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 hooks/usePrevious.js

diff --git a/README.md b/README.md
index c4c0a48..8431646 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ yarn add use-custom-hooks
 - [useGeoLocation](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usegeolocation)
 - [useLocalStorage](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-uselocalstorage)
 - [useMousePosition](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usemouseposition)
+- [usePrevious](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-useprevious)
 
 ## 📄 Documentation
 For documentaion, examples and other details refer [Documentation](https://github.com/aromalanil/useCustomHooks/tree/master/docs)
diff --git a/docs/README.md b/docs/README.md
index a1aa418..b200f38 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -9,6 +9,8 @@
 - [useToggle](#-usetoggle)
 - [useMousePosition](#-usemouseposition)
 - [useGeoLocation](#-usegeolocation)
+- [usePrevious](#-useprevious)
+
 
 ## 💾 useLocalStorage
 
@@ -225,6 +227,40 @@ const Home = () => {
 };
 ```
 
+## 🕒 usePrevious
+
+Custom hook for retrieving the previous useState value
+
+### Usage
+
+```jsx
+function App() {
+  // normal usage of useState
+  const [visible, setVisible] = useState(false);
+  
+  // using the custom usePrevious hook to retrieve the value that was provided in the previous render
+  const prevVisibility = usePrevious(visible);
+  
+  // Display both current and previous visibility states
+  return (
+    <div>
+      <h1>Current visibility: {visible ? "visible":"not visible"}</h1>
+      <h1>Previous visibility: {prevVisibility ? "visible":"not visible"}</h1>
+      <button onClick={() => setVisible(!visible)}>Toggle Visibility</button>
+    </div>
+   );
+}
+```
+
+### Parameters
+
+1. `value` (_any_) : The current value (will be the previous value in the next render).
+
+### Return value
+
+1. `value` (_any_) : The previous state.
+
+
 # Contribution Guidelines
 
 Documentation for each hook should follow this template.
diff --git a/hooks/usePrevious.js b/hooks/usePrevious.js
new file mode 100644
index 0000000..e67157f
--- /dev/null
+++ b/hooks/usePrevious.js
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Custom hook to retrieve the previous value of a useState
+ *
+ * @param {*} value Initial value of the state.
+ */
+const usePrevious = (value) => {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef();
+
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+export default usePrevious;
diff --git a/index.js b/index.js
index 1097a39..ba83822 100644
--- a/index.js
+++ b/index.js
@@ -5,3 +5,4 @@ export { default as useDebounce } from './hooks/useDebounce';
 export { default as useGeoLocation } from './hooks/useGeoLocation';
 export { default as useLocalStorage } from './hooks/useLocalStorage';
 export { default as useMousePosition } from './hooks/useMousePosition';
+export { default as usePrevious } from './hooks/usePrevious';
diff --git a/package-lock.json b/package-lock.json
index f637882..96fd8eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.5.0",
+  "version": "1.5.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 2354545..bfd6a21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {