Skip to main content
Version: 5.7.2

useDebounce

About​

Debounce hook for react. Internally, it uses lodash debounce.

Installation​

npm install --save rooks

Importing the hook​

import { useDebounce } from "rooks";

Usage​

function App() {
const [value, setValue] = useState("");
const setValueDebounced = useDebounce(setValue, 500);

return (
<div>
<input
onChange={(e) => setValueDebounced(e.target.value)}
placeholder="Please type here"
/>
<div>{value}</div>
</div>
);
}

Arguments​

ArgumentTypeDescriptionDefault value
callbackFunctionThe function to debounceundefined
waitnumberThe duration to debounce in millisecondsundefined
optionsObjectoptions to pass into lodash's debounce{}

Return Value​

NameTypeDescription
debouncedFunctionFunctionThe debounced function

Codesandbox Examples​

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.