Skip to main content

useThrottleFn

Throttles a function.

API​

const throttledFn = useThrottleFn(fn, delay);

Options​

  • fn: Function (T)(Required)
    • The function to be throttled
  • delay: number(Required)
    • Delay in miliseconds

Returns​

  • throttledFn: T (generic)
    • The throttled function
  • clearTimeout: () => void
    • The function to clear the throttle timeout (to cancel throttle)

Examples​

http://localhost:3000/
ℹī¸ Check the console

Throttle 1 second

Debounce 1 second

import { useThrottleFn, useDebounceFn } from 'react-power-ups';

export function DemoThrottle() {
  const [fetchData, cancel] = useThrottleFn((value: string) => {
    console.info(`Fetch data by keyword "${value}" âŗ`);
  }, 1000);

  return (
    <>
      <h3>Throttle 1 second</h3>
      <input type="text" onChange={(e) => fetchData(e.target.value)} />
      <button onClick={cancel}>Cancel</button>
    </>
  );
}

export function DemoDebounce() {
  const [fetchData, cancel] = useDebounceFn((value: string) => {
    console.info(`Fetch data by keyword "${value}" âŗ`);
  }, 1000);

  return (
    <>
      <h3>Debounce 1 second</h3>
      <input type="text" onChange={(e) => fetchData(e.target.value)} />
      <button onClick={cancel}>Cancel</button>
    </>
  );
}

Code: https://github.com/afiiif/react-power-ups/blob/main/src/use-throttle-fn.ts