Skip to main content

useThrottle

Get throttled value.

API​

const throttledValue = useThrottle(value, delay, callbackFn);

Options​

  • value: any (T)(Required)
    • The value to be throttled
  • delay: number(Required)
    • Delay in miliseconds
  • callbackFn?: (value: T) => void
    • Callback function after throttled

Returns​

  • throttledValue: T (generic)
    • The throttled value

Examples​

http://localhost:3000/

Throttle 1 second

Keyword:
Throttled keyword:

Debounce 1 second

Keyword:
Debounced keyword: 
import { useState } from 'react';
import { useThrottle, useDebounce } from 'react-power-ups';

export function DemoThrottle() {
  const [keyword, setKeyword] = useState('');
  const throttledKeyword = useThrottle(keyword, 1000);

  return (
    <>
      <h3>Throttle 1 second</h3>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <div>Keyword: {keyword}</div>
      <div>Throttled keyword: {throttledKeyword}</div>
    </>
  );
}

export function DemoDebounce() {
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 1000);

  return (
    <>
      <h3>Debounce 1 second</h3>
      <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <div>Keyword: {keyword}</div>
      <div>Debounced keyword: {debouncedKeyword}</div>
    </>
  );
}

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