Debounce Hooks

Debouncing is a technique used to control how often a function is executed. When an event triggers the function multiple times in quick succession (like typing in a search box or resizing a window), debouncing ensures the function only runs once after a specified period of inactivity has passed since the last trigger.

Common Use Cases:

• Search Input: Wait until the user stops typing before fetching search results.
• Window Resizing: Only recalculate layout after the user finishes resizing the window.
• Button Clicks: Prevent accidental double-clicks from triggering an action multiple times.
• Autocomplete: Delay API calls for suggestions until typing pauses.

This project includes the following custom React hooks for implementing debouncing:

1. useDebounceFunction(fn, waitTime):

   • Takes a function fn and a waitTime (in milliseconds, defaults to 400).
   • Returns a debounced version of the function.
   • When the returned function is called, it waits for waitTime milliseconds of inactivity before executing the original fn.
   • If called again within the waitTime, the previous timer is cleared, and a new one starts.
   • The returned function also has a .cancel() method to manually clear any pending timeout.

2. useDebounce(value, delay):

   • Takes a value (like state from useState) and a delay (in milliseconds).
   • Returns a debounced version of the value.
   • The returned value only updates after the input value has stopped changing for the specified delay.
   • Useful for scenarios like delaying actions based on rapidly changing state (e.g., triggering API calls based on user input).
   • Uses useDebounceFunction internally.

Example Usage

useDebounce (Debouncing a Value - e.g., Search Input)

This is ideal when you want to react to a value (like component state) only after it has stabilized.

// src/components/search.tsx
import { useEffect, useState } from "react";
import { useDebounce } from "../hooks/debounce";

export function SearchComponent() {
  const [query, setQuery] = useState('');
  // Debounce the query state with a 400ms delay
  const debouncedQuery = useDebounce(query, 400);
  
  useEffect(() => {
    // This effect runs only when debouncedQuery changes
    if (debouncedQuery) {
      fetchSearchResults(debouncedQuery);
    }
    // No need to include 'query' in dependencies, only the debounced value
  }, [debouncedQuery]);
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };

  return <input onChange={handleChange} value={query} placeholder="Search..." />;
}

function fetchSearchResults(searchQuery: string) {
  console.log("Fetching results for:", searchQuery); // Replace with actual API call
}

useDebounceFunction (Debouncing a Function Call - e.g., Button Click)

This is useful when you want to debounce the execution of a specific function or event handler directly.

import { useCallback } from "react";
import { useDebounceFunction } from "../hooks/debounce";

function MyComponent() {

  const handleClick = () => {
    console.log("Button clicked! Performing action...");
    // Perform some action that shouldn't happen too rapidly
  };

  // Create a debounced version of the handleClick function with a 500ms delay
  const debouncedHandleClick = useDebounceFunction(handleClick, 500);

  return (
    <button onClick={debouncedHandleClick}>
      Click Me (Debounced)
    </button>
  );
}

export default MyComponent;