How to implement a custom hook for debouncing user input in React

To implement a custom hook for debouncing user input in React, you can create a hook that takes care of the debouncing logic and returns the debounced value along with a function to update it. Here's how you can do it:

javascriptCopy code
import { useState, useEffect } from 'react';

// Custom hook for debouncing user input
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Set a timer whenever the value changes
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Clear the timeout if the value changes before the delay expires
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

// Example usage of the useDebounce hook
function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const debouncedInputValue = useDebounce(inputValue, 500); // Debounce with a delay of 500 milliseconds

  // Update the input value
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Debounced Value: {debouncedInputValue}</p>
    </div>
  );
}

export default MyComponent;

In this example:

• We define a custom hook called useDebounce that takes the value to debounce and the delay (in milliseconds) as arguments.
• Inside the hook, we use useState to manage the debounced value (debouncedValue).
• We use useEffect to set a timeout whenever the value changes. The timeout delays updating the debouncedValue until after the specified delay.
• If the value changes before the delay expires, the previous timeout is cleared, ensuring that the debounced value is only updated after a period of inactivity (delay).
• Finally, the hook returns the debouncedValue.

You can use this custom hook in your components to debounce user input. The debounced value will reflect the latest input value after the specified delay, reducing unnecessary re-renders and optimizing performance, especially for operations like search inputs or autocomplete functionality.