the-react-hooks
HooksuseDebounce

useDebounce()

The useDebounce() hook is essential for performance optimization. It allows you to delay the processing of a value (like a search query) until the user has stopped typing for a specified duration, reducing unnecessary API calls or re-renders.

Import

typescript
import { useDebounce } from 'the-react-hooks';

Usage

Real-time Value-
Debounced Value
-

Status: Synced

Component.tsx
import { useDebounce } from 'the-react-hooks';
import { useState, useEffect } from 'react';

export const Component = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log('Searching for:', debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}

API

Arguments

  • value – T The value you want to debounce (e.g., string, number, or object).
  • delay – number (Optional) The delay in milliseconds. Defaults to 500ms.

Returns

  • debouncedValue – T The latest value after the delay timer has completed.
PrevioususeCookieNextuseDeviceDetect