Use Debounce Versions Save

• breakng change useDebounce hook changed isPending behavior from async reacting to the sync. Now isPending returns True as soon as the new value is sent to the hook: Example is here: https://github.com/xnimorz/use-debounce/blob/master/test/useDebounce.test.tsx#L303-L329

• Dev dependencies updated

• Fixed useDebouncedCallback return type. Closed https://github.com/xnimorz/use-debounce/issues/103 thanks to @VanTanev

• breakind change: removed callback field, instead of this useDebouncedCallback and useThrottledCallback returns a callable function: Old:

  const { callback, pending } = useDebouncedCallback(/*...*/);
  // ...
  debounced.callback();
  

  New:

  const debounced = useDebouncedCallback(/*...*/);
  // ...
  debounced();
  /**
   * Also debounced has fields:
   * {
   *   cancel: () => void
   *   flush: () => void
   *   isPending: () => boolean
   * }
   * So you can call debounced.cancel(), debounced.flush(), debounced.isPending()
   */
  

  It makes easier to understand which cancel \ flush or isPending is called in case you have several debounced functions in your component

• breaking change: Now useDebounce, useDebouncedCallback and useThrottledCallback has isPending method instead of pending

  Old:

  const { callback, pending } = useDebouncedCallback(/*...*/);
  

  New:

  const { callback, isPending } = useDebouncedCallback(/*...*/);
  /**
   * {
   *   callback: (...args: any[]) => ReturnType<T>
   *   cancel: () => void
   *   flush: () => void
   *   isPending: () => boolean
   * }
   */
  

• get rid of useCallback calls

• improve internal typing

• decrease the amount of functions to initialize each useDebouncedCallback call

• reduce library size:

  Whole library: from 946 B to 899 B === 47 B useDebounce: from 844 to 791 === 53 B useDebouncedCallback: from 680 to 623 === 57 B useThrottledCallback: from 736 to 680 === 56 B

• prevent having ininite setTimeout setup when component gets unmounted https://github.com/xnimorz/use-debounce/issues/97
• function type works correctly with useDebounce now. https://github.com/xnimorz/use-debounce/pull/95 Thanks to @csu-feizao

• Added useThrottledCallback

• Fix typing to infer correct callback type (thanks to @lytc)

• breaking change: Now useDebouncedCallback returns an object instead of array:

  Old:

  const [debouncedCallback, cancelDebouncedCallback, callPending] = useDebouncedCallback(/*...*/);
  

  New:

  const debounced = useDebouncedCallback(/*...*/);
  /**
   * debounced: {
   *   callback: (...args: T) => unknown, which is debouncedCallback
   *   cancel: () => void, which is cancelDebouncedCallback
   *   flush: () => void, which is callPending
   *   pending: () => boolean, which is a new function
   * } 
   */
  

• breaking change: Now useDebounce returns an array of 2 fields instead of a plain array: Old:

  const [value, cancel, callPending] = useDebounce(/*...*/);
  

  New:

  const [value, fn] = useDebouncedCallback(/*...*/);
  /**
   * value is just a value without changes
   * But fn now is an object: { 
   *   cancel: () => void, which is cancel
   *   flush: () => void, which is callPending
   *   pending: () => boolean, which is a new function
   * } 
   */
  

• Added pending function to both useDebounce and useDebouncedCallback which shows whether component has pending callbacks Example:

  function Component({ text }) {
    const debounced = useDebouncedCallback(useCallback(() => {}, []), 500);
  
    expect(debounced.pending()).toBeFalsy();
    debounced.callback();
    expect(debounced.pending()).toBeTruthy();
    debounced.flush();
    expect(debounced.pending()).toBeFalsy();
  
    return <span>{text}</span>;
  }
  

For more details of these major changes you could check this commit https://github.com/xnimorz/use-debounce/commit/1b4ac0432f7074248faafcfe6248df0be4bb4af0 and this issue https://github.com/xnimorz/use-debounce/issues/61

• Fixed security alerts

• 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:

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 https://github.com/xnimorz/use-debounce/pull/33

• breaking change now, useDebouncedCallback executes the latest callback, which was sent to the hook (thanks for the report @alexandr-bbm https://github.com/xnimorz/use-debounce/issues/35) https://github.com/xnimorz/use-debounce/commit/eca14cc25b1f14bdd337a555127fd98c54ab7a5c

• code shipped in ESM format. Thanks to @vkrol https://github.com/xnimorz/use-debounce/pull/34

• Rewrite to typescript