use-debounce-ts

use-debounce-ts is a lightweight, zero-dependency TypeScript hook that debounces any value or function in React applications. It helps to delay updating a value or invoking a function until a specified wait time has passed, preventing unnecessary updates or expensive operations, like API calls, on each change.

Features

• Simple API: Only requires a value and a delay.
• TypeScript support: Full type safety and inference.
• Versatile: Works with any value, including strings, numbers, objects, and functions.
• No dependencies: Clean, minimal, and easy to integrate.

Installation

Install the package using npm or yarn:

npm install use-debounce-ts
yarn add use-debounce-ts

## Usage

## Debouncing a Value

import { useDebounce } from 'use-debounce-ts';
import { useState, useEffect } from 'react';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  
  // Debounce searchTerm with a delay of 500ms
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // Trigger search when debounced value changes
      console.log("Searching for:", debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}

export default SearchComponent;