useDebounceValue
A custom hook that debounces a value.
Installation
npx react-usekit@latest init
Select: hooks → TypeScript or JavaScript → path -> useDebounceValue
Usage
import { useDebounceValue } from "./hooks/useDebounceValue";
import { useState } from "react";
function App() {
const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounceValue(searchTerm, 500);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<p>Current: {searchTerm}</p>
<p>Debounced: {debouncedSearchTerm}</p>
</div>
);
}
API
Parameters
Parameter | Type | Description |
---|---|---|
value | T | The value to debounce |
delay | number | The debounce delay in milliseconds |
Returns
Type | Description |
---|---|
T | The debounced value |