🕒 added usePrevious hook (#33)

* 🕒added usePrevious hook

* added the documentation of usePrevious hook

* added usePrevious hook to Readme

* Bumped up the version.

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)

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.

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;

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';

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": {