use-debounce

What's Changed

• Bump form-data from 4.0.0 to 4.0.4 by @dependabot[bot] in https://github.com/xnimorz/use-debounce/pull/198
• Fix/cancel ispending UI update by @elrion018 in https://github.com/xnimorz/use-debounce/pull/199

Full Changelog: https://github.com/xnimorz/use-debounce/compare/10.0.5...10.0.6

What's Changed

• Update outdated tsdoc for useDebouncedCallback by @stephan281094 in https://github.com/xnimorz/use-debounce/pull/195
• Fix isPending updating bug and add a test case. by @elrion018 in https://github.com/xnimorz/use-debounce/pull/196
• Bump esbuild and @size-limit/preset-small-lib by @dependabot[bot] in https://github.com/xnimorz/use-debounce/pull/197

New Contributors

• @stephan281094 made their first contribution in https://github.com/xnimorz/use-debounce/pull/195
• @elrion018 made their first contribution in https://github.com/xnimorz/use-debounce/pull/196

Full Changelog: https://github.com/xnimorz/use-debounce/compare/10.0.4...10.0.5

• Fix behaviour for strictMode react when leading is set to true and trailing is true

• Removed peerDependency part from package.json as NPM cannot correctly resolve peerDependency for beta and rc versions: see https://stackoverflow.com/questions/67934358/npm-including-all-range-of-pre-release-when-defining-peer-dependency for context

• Fixed: isPending does not reset the state if the tracked value hasn't changed.. See https://github.com/xnimorz/use-debounce/issues/178

• Fixed flush method return args, thanks to @h

• ❗️ [Major breaking change] replaced index.modern.js with index.mjs. Might require a little change in your build pipeline
• ❗️ [Major breaking change] New option debounceOnServer: if you put the option to true, it will run debouncing on server (via setTimeout). The new option can break your current server behaviour, as v9.x, it runs all the time and might cause unnessesary server CPU utilisation. Now, by default, debounced callbacks do not happen on server.
• ❕[Minor breaking change]: Replaced useState for useDebounce with useReducer. It might lead to reduced amount of re-renders, as useState is known to have excess re-renders in some corner: https://stackoverflow.com/questions/57652176/react-hooks-usestate-setvalue-still-rerender-one-more-time-when-value-is-equal
• ❕[Minor breaking change]: useDebouncedCallback now updates function to call asap. Meaning, if you re-called the hook and it should trigger immediately, it will trigger the newest function all the time.
• ℹ Lib size:
  • 914 B: index.js.gz
  • 851 B: index.js.br
  • 883 B: index.mjs.gz
  • 826 B: index.mjs.br
  • 938 B: index.module.js.gz
  • 873 B: index.module.js.br
  • 989 B: index.umd.js.gz
  • 919 B: index.umd.js.br
• ℹ [Internal] Replaced Enzyme with testing-library
• ℹ [Internal] yarn classic => npm
• ℹ [Internal] Updated devDependencies

• Tweak exports, see PR, thanks to @Andarist
• Changed types, see PR, thanks to @wangcch

• Represent correct return type from useDebounce(), see issue, thanks to @appden

• Reverted 9.0.0. We will revisit these changes later

Fix the bug with the incorrect import path. Now it's index.cjs, instead of index.js

• Moved use-debounce to support modules see issue Thank to @matewilk
• breaking change The path to dist/index.js is changed. Now it's dist/index.cjs.

• Changes types for useDebouncedCallback args: https://github.com/xnimorz/use-debounce/pull/140 Thanks to @sarunast

• Added types to package json to mitigate https://github.com/microsoft/TypeScript/issues/49160. https://github.com/xnimorz/use-debounce/pull/138 Thanks to @wuzzeb

• Added type exports. https://github.com/xnimorz/use-debounce/pull/136 Thanks to @tryggvigy
• Improved code comments. https://github.com/xnimorz/use-debounce/pull/135 Thanks to @tryggvigy

• update library exports section to make exports work correctly with jest@28

• breaking change useDebounce changed its build system to microbundle. For now we have several entries:

index.js is for commonJS approach index.modern.js for esnext module system index.umd.js for UMD. All the files are in dist folder.

If you have any paths which have esm or lib, please, replace them to dist:

Before:

import useDebounceCallback from 'use-debounce/lib/useDebounceCallback'

After:

import { useDebounceCallback } from 'use-debounce';

• Fixed issue with incorrect VSCode autocomplete https://github.com/xnimorz/use-debounce/issues/131 Thanks to @c-ehrlich for reporting
• Fixed useDebounce behaviour with react-devtools tab when devtools have a component with useDebounce or useDebounceCallback opened. https://github.com/xnimorz/use-debounce/issues/129 Thanks to @alexniarchos for reporting
• Fixed issue with leading: true https://github.com/xnimorz/use-debounce/issues/124 Thanks to @mntnoe for reporting

• debounced object now is preserved for use-debounce between the renders. Thanks to @msharifi99 for reporting.

• 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

• breaking 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 { isPending } = useDebouncedCallback(/*...*/);
  /**
   * {
   *   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

— wait param is optional. If you don't provide a wait argument, use-debounce will postpone a callback with requestAnimationFrame if it's in browser environment, or through setTimeout(..., 0) otherwise.

• Add an export for React Native

• Fix the export map (https://github.com/xnimorz/use-debounce/issues/84);

• 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" />

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

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

• Clear cache in build directory. Thanks to @wangcch

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

• Now callPendings wrapped with useCallback hook, so that the reference to the function would be the same. Thanks to @jfschwarz

• useDebouncedCallback and useDebounce now can configure both leading and trailing options. They are fully compatible with lodash.debounce function https://lodash.com/docs/4.17.15#debounce. leading by default is false, trailing by default is true. Examples: https://codesandbox.io/s/vigilant-bush-zrbzg https://github.com/xnimorz/use-debounce/blob/master/test/useDebouncedCallback.test.tsx#L29-L180

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

• 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

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

• 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

— Added types field in package.json. Thanks to @nmussy

• Added leading calls param https://github.com/xnimorz/use-debounce#leading-calls thanks to @Pringels
• Updated dev-dependencies

• Rewrite to typescript