Hook Master 🚀

useDebounce

Debounces value changes

Usage

useDebounce hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request.

import { useDebounce } from 'hook-master-react';
 
function Demo() {
  const [value, setValue] = useDebounce("", 200);
 
  return (
    <>
      <input
        type="text"
        placeholder="Enter value to have debounce value"
        onChange={(event) => setValue(event.currentTarget.value)}
      />
      <dev>Debounced value: {value}</dev>
    </>
  );
}

Definition

function useDebouncedState<T = any>(
  initialValue: T,
  delay: number,
): readonly [T, (newValue: T) => void];

Previous

useCounter

Next

useDisclose

On this page