Skip to main content

useDebounce

Get debounced value.

API​

const debouncedValue = useDebounce(value, delay, callbackFn);

Options​

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

Returns​

  • debouncedValue: T (generic)
    • The debounced value

Examples​

http://localhost:3000/

Debounce 1 second

Keyword:
Debounced keyword:

Throttle 1 second

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

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>
    </>
  );
}

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>
    </>
  );
}

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