useDebounce()

useDebounce<T>(value, delay?): T

Defined in: hooks/state/useDebounce.ts:40

A React hook that debounces a value.

It delays updating the returned value until after the specified delay has elapsed since the last time the input value changed.

Commonly used for search inputs, filters, or any value that should not update on every keystroke but only after the user pauses typing.

Type Parameters

T

T

Parameters

value

T

The value to debounce. Can be any type.

delay?

number = 200

The debounce delay in milliseconds.

Returns

T

The debounced value.

Example

import { useState, useEffect } from 'react';
import { useDebounce } from '@zl-asica/react/hooks';

const Search = () => {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) return;
    // Fire the search request with `debouncedQuery`
  }, [debouncedQuery]);

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