Chat GPT Debounced Hook Example

useDebouncedInput.ts

import React, { useState, useEffect, ChangeEvent } from 'react';

type DebouncedInputHookProps = {
  delay: number;
  callback: (value: string) => void;
};

type DebouncedInputHookResult = {
  debouncedValue: string;
  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
};

const useDebouncedInput = ({ delay, callback }: DebouncedInputHookProps): DebouncedInputHookResult => {
  const [inputValue, setInputValue] = useState<string>('');
  const [debouncedValue, setDebouncedValue] = useState<string>('');

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      setDebouncedValue(inputValue);
      callback(debouncedValue); // Execute the provided callback with the debounced value
    }, delay);

    return () => clearTimeout(debounceTimer);
  }, [inputValue, debouncedValue, delay, callback]);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  return { debouncedValue, handleChange };
};

// Usage example
const MyComponent = () => {
  const [searchQuery, setSearchQuery] = useState<string>('');

  const handleSearch = (debouncedQuery: string) => {
    // Perform the search operation here using the debounced value (debouncedQuery)
    console.log('Searching for:', debouncedQuery);
  };

  // This hook returns the debounced value and a handleChange function
  const { debouncedValue, handleChange } = useDebouncedInput({ delay: 500, callback: handleSearch });

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleChange}
        placeholder="Type to search..."
      />
    </div>
  );
};