useDebounce

A hook that debounces (delays) the given callback function to prevent repeated calls within a specified time period.

Code

🔗 View source code

Interface

typescript

type DebounceParameters = Parameters<typeof debounce>;

type DebounceReturnType<T extends (...args: any) => any> = ReturnType<
  typeof debounce<T>
>;

typescript

function useDebounce<T extends (...args: any) => any>(
  callback: T,
  wait: DebounceParameters[1],
  options?: DebounceParameters[2]
): DebounceReturnType<T>;

Parameters

Name	Type	Description
callback	T	The callback function to debounce
wait	number	Delay time in milliseconds
options	{ maxWait?: number; leading?: boolean; trailing?: boolean; signal?: AbortSignal }	Debounce behavior options

Usage

typescript

import { useState } from 'react';
import { useDebounce } from '@modern-kit/react';

const Example = () => {
  const [count, setCount] = useState(1);
  const [debouncedCount, setDebouncedCount] = useState(1);

  const countUp = () => {
    setCount(count + 1);
  };

  const debouncedCountUp = useDebounce(() => {
    setDebouncedCount(debouncedCount + 1);
  }, 1000);

  return (
    <div>
      <div style={{ display: "flex" }}>
        <button onClick={countUp}>Click button</button>
        <div style={{ width: "50px" }} />
        <button onClick={debouncedCountUp}>Click debounce button</button>
      </div>
      <div>
        <p>count: {count}</p>
        <p>debouncedCount: {debouncedCount}</p>
      </div>
    </div>
  );
};

Example

count: 1

debouncedCount: 1