4.0.0

• breaking change: Support lodash style throttling options for trailing+maxWidth. Thanks to @tryggvigy
  Example:

useDebouncedCallback(callback, 300, {
  leading: true,
  trailing: false,
  maxWait: 300,
})

Where the trailing edge is turned off. Let's say the function is called twice in the first 300ms. Now debounced function to have been called once.

how to migrate: Please, check your traling: false params with maxWait option

• breaking change: Now in case delay option is unset, it will be requestAnimationFrame delay

• breaking change: Now debouncedCallback from useDebouncedCallback returns a value. In v3 it used to return undefined:

New pathes and methods

3.2.0

• useDebounce has callPending method. See https://github.com/xnimorz/use-debounce/blob/master/test/useDebounce.test.tsx#L276-L302 unit test for examples.

3.1.0

• Now package includes only nessesary files. Thanks to @vkrol
• Added optional equalityFn to options object for useDebounce so that you can provide a custom equality function to the hook. Thanks to @seruco

3.0.1

• Added missed esm directory (thanks for reporting @FredyC)
• Fixed import name (thanks for PR @neoromantic)
• Updated eslint-utils lib version due to security issue

3.0.0

• breaking change now, cache file renamed to useDebounce and callback file renamed to useDebouncedCallback.
  If you used to import file by its path:

import useDebounce from 'use-debounce/lib/cache';
import useDebouncedCallback from 'use-debounce/lib/callback';

it should be renamed to

import useDebounce from 'use-debounce/lib/useDebounce';
import useDebouncedCallback from 'use-debounce/lib/useDebouncedCallback';

It helps us to keep more descriptive names. Thanks to @vkrol
#33

• breaking change now, useDebouncedCallback executes the latest callback, which was sent to the hook (thanks for the report @alexandr-bbm #35)
  eca14cc

• code shipped in ESM format. Thanks to @vkrol
  #34

2.1.0

• Rewrite to typescript

2.0.0

• breaking changes now, useDebounceCallback doesn't have deps argument. If you want to cache your callback it's better to use:

const myCallback = useDebouncedCallback(
  useCallback(() => {
    /* do some stuff */
  }, [value]),
  500
);

• added size-limit to the project.
• Reduce size of the library from 705 bytes to 352 bytes (50%)

1.1.1

• add callPending callback to useDebouncedCallback method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback.

import React, { useState, useCallback } from 'react';
import useDebouncedCallback from 'use-debounce/lib/callback';

function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
  const [debouncedFunction, cancel, callPending] = useDebouncedCallback(
    (value) => {
      asyncFetchData;
    },
    500,
    [],
    { maxWait: 2000 }
  );

  // When the component goes to be unmounted, we will fetch data if the input has changed.
  useEffect(
    () => () => {
      callPending();
    },
    []
  );

  return <input defaultValue={defaultValue} onChange={(e) => debouncedFunction(e.target.value)} />;
}

More examples are available here: 989d6c0#diff-c7e0cfdec8acc174d3301ff43b986264R196

use-debounce

The full example: https://codesandbox.io/s/4wvmp1xlw4

• add maxWait option. The maximum time func is allowed to be delayed before it's invoked.
• add cancel callback (thanks to @thibaultboursier or contributing). Cancel callback removes func from the queue (even maxWait).
• [BREAKING] change the contact of use-debounce callback and value hooks:

Old:

import { useDebounce, useDebouncedCallback } from 'use-debounce';

...
const debouncedValue = useDebounce(value, 1000);
const debouncedCallback = useDebouncedCallback(() => {...}, 1000);

New:

import { useDebounce, useDebouncedCallback } from 'use-debounce';

...
const [ debouncedValue, cancelValueDebouncingCycle ] = useDebounce(value, 1000);
const [ debouncedCallback, cancelCallback ] = useDebouncedCallback(() => {...}, 1000);

You still can use only value and callback:

import { useDebounce, useDebouncedCallback } from 'use-debounce';

...
const [ debouncedValue ] = useDebounce(value, 1000);
const [ debouncedCallback ] = useDebouncedCallback(() => {...}, 1000);