use-debounce - npm Package Versions

5.0.2

• Add size-limit and configure it for esm modules. Now the size of the whole library is limited within 1 KB (thanks to @omgovich)

• Add an export map to your package.json. (thanks to @omgovich)

• Reduce bundle size (thanks to @omgovich): Before:

  esm/index.js
  Size:       908 B with all dependencies, minified and gzipped
  
  esm/index.js
  Size:       873 B with all dependencies, minified and gzipped
  
  esm/index.js
  Size:       755 B with all dependencies, minified and gzipped
  

  Now:

  esm/index.js
  Size:       826 B with all dependencies, minified and gzipped
  
  esm/index.js
  Size:       790 B with all dependencies, minified and gzipped
  
  esm/index.js
  Size:       675 B with all dependencies, minified and gzipped
  

• Add notes about returned value from debounced.callback and its subsequent calls: https://github.com/xnimorz/use-debounce#returned-value-from-debouncedcallback

• Add project logo (thanks to @omgovich): <img src="logo.png" width="500" alt="use-debounce" />

5.0.1

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

5.0.0

• 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] = useDebounce(/*...*/);
  /**
   * 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

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:

3.4.3

• Fix use-debounce so that it works correctly with react-native and next.js (as both of them use fast-refresh).

3.4.2

• Clear cache in build directory. Thanks to @wangcch

3.4.1

• update types, so that they are more convinient. Thanks to @astj