added useThrottledValue & usePrevious hook

README.md

@@ -7,6 +7,8 @@ A lightweight library that provides two essential custom hooks for your react or
 - **`useInterval`**: Set up recurring functions at specified intervals.
 - **`useTimeout`**: Delay execution of a function for a specified time.
 - **`useDebouncedValue`**: Debounce a value, updating it after a specified delay.
+- **`useThrottledValue`**: Throttle a value, ensuring it updates only once within the specified delay period.
+- **`usePrevious`**: Capture and store the previous value of a state or prop.
 
 ## Installation
 
@@ -103,6 +105,68 @@ const SearchComponent = () => {
 };
 ```
 
+### useThrottledValue:
+
+#### Syntax:
+
+```
+const throttledValue = useThrottledValue(value, delay);
+```
+
+#### Example
+
+```
+import { useThrottledValue } from '@shurutech/react-hook-tools';
+
+function ThrottleTestComponent() {
+  const [inputValue, setInputValue] = React.useState("");
+  const throttledValue = useThrottle(inputValue, 1000);
+
+  return (
+    <div>
+      <h2>useThrottledValue Hook Test</h2>
+      <input
+        type="text"
+        placeholder="Type something..."
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+      />
+      <p>Immediate Value: {inputValue}</p>
+      <p>Throttled Value (updates every 1000ms): {throttledValue}</p>
+    </div>
+  );
+}
+
+export default ThrottleTestComponent;
+```
+
+### usePrevious:
+
+#### Syntax:
+
+```
+const previousValue = usePrevious(value);
+```
+
+#### Example
+
+```
+import { usePrevious } from '@shurutech/react-hook-tools';
+
+const PreviousValueComponent = () => {
+  const [count, setCount] = React.useState(0);
+  const previousCount = usePrevious(count);
+
+  return (
+    <div>
+      <p>Current Count: {count}</p>
+      <p>Previous Count: {previousCount}</p>
+      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
+    </div>
+  );
+};
+```
+
 ## How to Contribute
 1. Fork this repository to your GitHub account and clone it locally.
 

src/hooks/usePrevious.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+export function usePrevious(value) {
+    const ref = useRef();
+
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref.current;
+}

src/hooks/useThrottledValue.js

@@ -0,0 +1,23 @@
+import { useState, useEffect, useRef } from "react";
+
+export function useThrottledValue(value, delay) {
+  const [throttledValue, setThrottledValue] = useState(value);
+  const lastExecuted = useRef(Date.now());
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      const timeSinceLastExecution = Date.now() - lastExecuted.current;
+
+      if (timeSinceLastExecution >= delay) {
+        setThrottledValue(value);
+        lastExecuted.current = Date.now();
+      }
+    }, delay - (Date.now() - lastExecuted.current));
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return throttledValue;
+}

src/index.js

@@ -1,5 +1,7 @@
 import { useInterval } from "./hooks/useInterval";
 import { useTimeout } from "./hooks/useTimeout";
 import { useDebouncedValue } from "./hooks/useDebouncedValue";
+import { useThrottledValue } from "./hooks/useThrottledValue";
+import { usePrevious } from "./hooks/usePrevious";
 
-export {useInterval,useTimeout,useDebouncedValue}
+export {useInterval,useTimeout,useDebouncedValue, usePrevious, useThrottledValue}