Skip to main content
Version: 5.0.3

useThrottle

About#

Throttle custom hook for React

Installation#

npm install --save rooks

Importing the hook#

import { useThrottle } from 'rooks';

Usage#

function ThrottleDemo() {
const [number, setNumber] = useState(0);
const addNumber = () => setNumber(number + 1);
const [addNumberThrottled, isReady] = useThrottle(addNumber, 1000);
// isReady is a boolean that tells you whether calling addNumberThrottled at that point
// will fire or not.
// Once the timeout of 1000ms finishes, isReady will become true to indicate that the next time
// addNumberThrottled is called it will run right away.
return (
<>
<h1>Number: {number}</h1>
<p>Click really fast.</p>
<button onClick={addNumber}>Add number</button>
<button onClick={addNumberThrottled}>Add number throttled</button>
</>
);
}

Arguments#

ArgumentTypeDescriptionDefault value
callback (required)functionFunction that needs to be throttleundefined
timeout (optional)numberTime to throttle the callback in ms300

Codesandbox Example#

Basic usage#

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5