`@react-hooks-hub/use-debounce` hook allows you to manage delayed execution of functions, making it particularly useful for scenarios where you need to control the rate of certain actions based on user input.
# @react-hooks-hub/use-debounce
## Installation
Use your preferred package manager to install `@react-hooks-hub/use-debounce`:
```bash
npm install @react-hooks-hub/use-debounce
# or
yarn add @react-hooks-hub/use-debounce
```
## Usage
Import and use the useDebounce hook in your component:
```JSX
import React from 'react';
import { useDebounce } from '@react-hooks-hub/use-debounce';
const MyComponent = () => {
// Create a debounced version of the handleSearch function using the useDebounce hook
// The debounced function will trigger after a 300ms delay after the last change
const debouncedSearch = useDebounce(handleSearch, 300);
// Define the handleSearch function, which represents the action to be debounced
// This function takes a 'query' parameter representing the search query
// In this example, the function logs the query to the console
const handleSearch = (query: string) => {
console.log(query);
};
return (
debouncedSearch(e.target.value)}
placeholder="Search..."
/>
);
};
export default MyComponent;
```
---
_Source: https://npm.io/package/@react-hooks-hub/use-debounce · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
