useDebounce

A hook for debouncing values to optimize performance. This custom hook provides a convenient way to optimize performance by limiting the rate at which a function is called.

Implementation

function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);

useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);

  return () => {
    clearTimeout(handler);
  };

}, [value, delay]);

return debouncedValue;
}

Usage

Debounce search input values

export default function App()  {
  const [text, setText] = useState('');
  const debouncedText = useDebounce(text, 1000);

  return (
    <div>
      <textarea
        value={text}
        onChange={(e)=> setText(e.target.value)}
        placeholder="Start typing..."
      />
      <p>Current length: {text.length}</p>
      <p>Debounced length: {debouncedText.length}</p>
    </div>
  );

}

Parameters

valueTrequired

The value to debounce

delaynumberrequired

The delay in milliseconds

Live Playground

Best Practices

Choose an appropriate delay based on your use case
Consider using a longer delay for expensive operations
Use in conjunction with useCallback for event handlers

Performance

Minimal memory overhead
Reduces number of state updates
Prevents unnecessary re-renders