Debouncing a Search Input using debounce Effect

Use the `debounce` effect to implement a search input that triggers an API call, debouncing subsequent calls to limit the number of requests.
import { useState, useEffect } from 'react';
import { debounce } from 'lodash';
This code snippet imports the necessary hooks from React and the debounce function from lodash.
const useDebouncedSearch = (searchFunction) => {
  const [inputValue, setInputValue] = useState('');
  useEffect(() => {
    const debouncedSearch = debounce(searchFunction, 300);
    if (inputValue) debouncedSearch(inputValue);
    // Cleanup function to cancel the debounced call on component unmount
    return () => debouncedSearch.cancel();
  }, [inputValue, searchFunction]);
  return { inputValue, setInputValue };
This custom hook, `useDebouncedSearch`, accepts a search function as a parameter. It uses the `useState` hook to keep track of the search input's value. The `useEffect` hook sets up a debounced version of the passed search function, which is called whenever the input value changes. A cleanup function is also provided to cancel any pending debounced calls when the component unmounts or the input changes.
const MySearchComponent = () => {
  const { inputValue, setInputValue } = useDebouncedSearch((value) => {
    console.log('Search for:', value); // Replace with actual search function call
  return (
      onChange={(e) => setInputValue(}
This component, `MySearchComponent`, uses the `useDebouncedSearch` hook we defined earlier. It provides an input field where users can type their search query. As the user types, `setInputValue` updates `inputValue`, triggering the useEffect in our custom hook, which in turn debounces the search function calls, reducing the frequency of API requests.