@react-hooks-hub/use-debounce

Use Debounce

`@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:

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:

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 (
    <input
      type="text"
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
};

export default MyComponent;