From 280a1aa77620b2c1870b64b1d0ad9dcf3889974c Mon Sep 17 00:00:00 2001 From: sahil-sukhwani Date: Tue, 10 Dec 2024 10:22:13 +0530 Subject: [PATCH 1/4] added usePrevious hook --- src/hooks/usePrevious.js | 11 +++++++++++ src/index.js | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/hooks/usePrevious.js diff --git a/src/hooks/usePrevious.js b/src/hooks/usePrevious.js new file mode 100644 index 0000000..d329cfd --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0f45f06..ea1451c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import { useInterval } from "./hooks/useInterval"; import { useTimeout } from "./hooks/useTimeout"; import { useDebouncedValue } from "./hooks/useDebouncedValue"; +import { usePrevious } from "./hooks/usePrevious"; -export {useInterval,useTimeout,useDebouncedValue} \ No newline at end of file +export {useInterval,useTimeout,useDebouncedValue, usePrevious} \ No newline at end of file From cb78a4a5c94a607a90fa6f1ac202d99786551b76 Mon Sep 17 00:00:00 2001 From: sahil-sukhwani Date: Tue, 10 Dec 2024 10:37:38 +0530 Subject: [PATCH 2/4] updated readme md for usePrevious hook --- README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/README.md b/README.md index 8b5a1c6..7d3eaef 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ 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. +- **`usePrevious`**: Capture and store the previous value of a state or prop. ## Installation @@ -103,6 +104,33 @@ const SearchComponent = () => { }; ``` +### 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 ( +
+

Current Count: {count}

+

Previous Count: {previousCount}

+ +
+ ); +}; +``` + ## How to Contribute 1. Fork this repository to your GitHub account and clone it locally. From 0bcb31a982b6993c345b307f5a236a5b189f0799 Mon Sep 17 00:00:00 2001 From: sahil-sukhwani Date: Tue, 10 Dec 2024 10:49:44 +0530 Subject: [PATCH 3/4] added hook useThrottledValue --- src/hooks/useThrottledValue.js | 23 +++++++++++++++++++++++ src/index.js | 3 ++- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/hooks/useThrottledValue.js diff --git a/src/hooks/useThrottledValue.js b/src/hooks/useThrottledValue.js new file mode 100644 index 0000000..6a6a058 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index ea1451c..47e5b2f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +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, usePrevious} \ No newline at end of file +export {useInterval,useTimeout,useDebouncedValue, usePrevious, useThrottledValue} \ No newline at end of file From 95fdebb76334dbb7c543989500778d7befab6486 Mon Sep 17 00:00:00 2001 From: sahil-sukhwani Date: Tue, 10 Dec 2024 10:57:55 +0530 Subject: [PATCH 4/4] update readme.md for useThrottledValue --- README.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/README.md b/README.md index 7d3eaef..dd066e6 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ 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 @@ -104,6 +105,41 @@ 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 ( +
+

useThrottledValue Hook Test

+ setInputValue(e.target.value)} + /> +

Immediate Value: {inputValue}

+

Throttled Value (updates every 1000ms): {throttledValue}

+
+ ); +} + +export default ThrottleTestComponent; +``` + ### usePrevious: #### Syntax: