web

web / lib/hooks/use-debounce

lib/hooks/use-debounce

Custom React hooks for debouncing values.

Debouncing is a technique to limit the rate at which a function gets called. These hooks are useful for performance optimization, especially with user inputs that can change rapidly, such as search fields, map interactions, or filter adjustments. By delaying the update of a value, they prevent excessive re-renders or API calls.

Functions

useDebounce()

useDebounce<T>(value, delay): T

Custom hook to debounce a value.

Useful for preventing excessive API calls during rapid value changes like map panning/zooming, search input, or filter changes.

Type Parameters

T

T

Parameters

value

T

The value to debounce.

delay

number

Delay in milliseconds. Recommended values:

• 300ms for map interactions (pan/zoom)
• 500ms for search inputs
• 150ms for filter changes.

Returns

T

The debounced value.

Example

const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounce(searchTerm, 500);
 
useEffect(() => {
  // This will only run 500ms after the user stops typing
  searchAPI(debouncedSearchTerm);
}, [debouncedSearchTerm]);

useDebounceWithComparison()

useDebounceWithComparison<T>(value, delay, compare?): T

Debounce hook with deep comparison for objects.

Useful when you need to debounce objects and want to avoid unnecessary updates when object contents haven’t actually changed.

Type Parameters

T

T

Parameters

value

T

The value to debounce.

delay

number

Delay in milliseconds.

compare?

(prev, next) => boolean

Custom comparison function (optional).

Returns

T

The debounced value.