use-debounce - npm Package Versions

2.0.1

• Fix the issue https://github.com/xnimorz/use-debounce/issues/23. Thanks to @anilanar for reporting it.
• Add eslint to the project

2.0.0

• breaking changes now, useDebouncedCallback 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.3

• remove react-dom from peerDependencies (as you can use this library with react native).

1.1.2

• useCallback now memoize returned callback

1.1.0

• 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: https://github.com/xnimorz/use-debounce/commit/989d6c0efb4eef080ed78330233186d7b0c249e3#diff-c7e0cfdec8acc174d3301ff43b986264R196

1.0.0

The example with all features you can see here: https://codesandbox.io/s/4wvmp1xlw4

• add maxWait option. The maximum time func is allowed to be delayed before it's invoked:

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

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

• add cancel callback (thanks to @thibaultboursier for contributing). Cancel callback removes func from the queue (even maxWait):

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

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

• [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);