react-debounce-hook

use-debounce

A react hook for debouncing an input with state variables in react.

Usage

Simple demo
react-select demo

import React, { useState } from 'react';
 
const MyComponent() {
  const [value, setValue] = useState();
  const [debouncedValue, setDebouncedValue] = useState();
 
  useDebounce(value, setDebouncedValue);
 
  return (
    <div>
      <input onChange={({ target: { value } }) => setValue(value)} />
      
      {debouncedValue}
    </div>
  );
}

Parameters

value

value: any

Whenever this variable changes, the debounce method is triggered and the timer is started.

operation

operation: (value, ...params) => {...}

If the debounce timer ended without interruption, we call operation with the freshest value of value (+ all the params passed as 4+ arguments.)

delay

delay: number = 400

The debounce delay - after this amount of time operation will be called (without interruption of getting a new value).

params

params: any {...params}

Additional arguments to be passed to your operation, will be spread in the order that were passed.