Fixes #61- Add useDebounce Custom hook

[rray524]

Checklist:

• Added useDebounce custom hook

Resolves #61

How to use this useDebounce hook?

Usage Example of Theme Toggling:

import React, { useState, useEffect } from 'react';
import useDebounce from './useDebounce'; // Path to your custom Hook

const SearchInput = () => {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500); // Debounce with a 500ms delay

  // Simulate an API call triggered on the debounced value
  useEffect(() => {
    if (debouncedQuery) {
      console.log('Fetching results for:', debouncedQuery);
      // Example: Call an API with the debounced query
      // fetchResults(debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Type to search..."
      />
      <p>Search Query: {query}</p>
      <p>Debounced Query: {debouncedQuery}</p>
    </div>
  );
};

export default SearchInput;

Description

The useDebounce Hook is a custom React Hook that delays updating a value until after a specified delay. It is useful for optimizing performance in scenarios like search inputs or API calls by preventing excessive updates caused by frequent changes. This Hook ensures actions are triggered only after the user has stopped typing or interacting for a set period of time.

References