useDebounce()

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

Defined in: src/hooks/state/useDebounce.ts:64

useDebounce

A custom React hook to debounce a value or multiple values. It delays updating the state until after a specified period of inactivity. Useful for improving performance in scenarios like search input handling or API calls.

Type Parameters

T

T

Parameters

value

T

The value to debounce. Can be any type (e.g., primitive, object, array, function).

delay?

number = 200

The debounce delay in milliseconds. Defaults to 200ms.

Returns

T

The debounced value, which updates after the specified delay.

Examples

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

const MyComponent = () => {
  const [text, setText] = useState('');
  const debouncedText = useDebounce(text, 300);

  useEffect(() => {
    if (debouncedText) {
      console.log('Debounced text:', debouncedText);
    }
  }, [debouncedText]);

  return (
    <input
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)}
      placeholder="Type something..."
    />
  );
};

import { useCallback } from 'react';
import { useDebounce } from './useDebounce';

const MyComponent = () => {
  const handleSearch = (query: string) => {
    console.log('Search query:', query);
  };

  const debouncedSearch = useDebounce(
    useCallback((query: string) => handleSearch(query), [handleSearch]),
    300
  );

  return (
    <input
      type="text"
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
};