useDebounce is a custom React hook that delays invoking a function until a specified time has passed since the last call, ideal for handling user input like search fields.
npm install @ehsaneha/react-debouncebash
npm install @ehsaneha/react-debounce
`
or
`bash
yarn add @ehsaneha/react-debounce
`
---
๐ง Usage
`tsx
import React, { useState } from "react";
import { useDebounce } from "@ehsaneha/react-debounce";
const SearchInput = () => {
const [query, setQuery] = useState("");
const debouncedSearch = useDebounce((value: string) => {
// Your API call or logic here
console.log("Searching for:", value);
}, 500);
const handleChange = (e: React.ChangeEvent) => {
setQuery(e.target.value);
debouncedSearch(e.target.value);
};
return (
);
};
`
---
๐ง Hook Signature
`ts
function useDebounce void>(
callback: T,
delay: number
): T;
`
$3
- callback: The function to call after the debounce delay.
- delay: Time in milliseconds to wait after the last call before triggering.
$3
- A debounced version of the original function.
---
โ
Features
- Fully typed (TypeScript)
- Works with any function signature
- Cleans up timers automatically on component unmount
- Ideal for search fields, input validation, and real-time optimization
---
๐งช Testing
Tested with @testing-library/react, jest, and jsdom`. Includes: