@tianrang-sz/react-hooks

react hooks

useDebounce react hook

Install it with yarn:

yarn add @tianrang-sz/react-hooks

Or with npm:

npm i @tianrang-sz/react-hooks --save

simple demo

import { useDebounce } from '@tianrang-sz/react-hooks';

function Input({ defaultValue }) {
  const [value, setValue] = useState(defaultValue);
  // Debounce callback
  const [debouncedCallback] = useDebounce(
    // function
    value => {
      setValue(value);
    },
    // delay in ms
    1000
  );

  // you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens
  return (
    <div>
      <input
        defaultValue={defaultValue}
        onChange={e => debouncedCallback(e.target.value)}
      />
      <p>Debounced value: {value}</p>
    </div>
  );
}