Skip to main content
Version: Next

useDebouncedValue

About​

Tracks another value and gets updated in a debounced way.

Installation​

npm install rooks

Importing the hook​

import { useDebouncedValue } from "rooks";

Usage​

import React, { useState } from "react";
import { useDebouncedValue } from "rooks";

function Demo() {
const [value, setValue] = useState("");
const [debouncedFoo, immediatelyUpdateDebouncedValue] = useDebouncedValue(
value,
500
);
// use `immediatelyUpdateDebouncedValue` if you want to update `debouncedValue` immediately

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

render(<Demo />);

Arguments​

ArgumentTypeDescriptionDefault value
valueDatethe value to be debouncedundefined
timeoutnumbermilliseconds that it takes count down once1000
options.initializeWithNullbooleanShould the debouncedValue start off as null in the first renderfalse

Return Value​

An array is returned with the following items in it

NameTypeDescription
debouncedValuetypeof valueThe debouncedValue
immediatelyUpdateDebouncedValuefunctionHandy utility function to update the debouncedValue instantly

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.