useDebounce, useDebouncedCallback & useThrottledCallback

React libraries for debouncing without tears!

- Small size < 1 Kb
- Compatible with underscore / lodash impl — learn once, use everywhere
- Server-rendering friendly!

Features

- classic debounced callback
- value debouncing
- cancel, maxWait and memoization

Install

``sh
yarn add use-debounce


or

Debounce HTTP request with leading param: https://codesandbox.io/s/cache-example-with-areas-and-leading-param-119r3i

$3

Simple usage: https://codesandbox.io/s/x0jvqrwyq

Combining with native event listeners: https://codesandbox.io/s/32yqlyo815

Cancelling, maxWait and memoization: https://codesandbox.io/s/4wvmp1xlw4

HTTP requests: https://codesandbox.io/s/use-debounce-callback-http-y1h3m6

Changelog

https://github.com/xnimorz/use-debounce/blob/master/CHANGELOG.md

Simple values debouncing

According to https://twitter.com/dan_abramov/status/1060729512227467264
WebArchive link: https://web.archive.org/web/20210828073432/https://twitter.com/dan_abramov/status/1060729512227467264

`javascript
import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';

export default function Input() {
const [text, setText] = useState('Hello');
const [value] = useDebounce(text, 1000);

return (


This hook compares prev and next value using shallow equal. It means, setting an object {} will trigger debounce timer. If you have to compare objects (https://github.com/xnimorz/use-debounce/issues/27#issuecomment-496828063), you can use useDebouncedCallback, that is explained below:

Debounced callbacks

Besides useDebounce for values you can debounce callbacks, that is the more commonly understood kind of debouncing.
Example with Input (and react callbacks): https://codesandbox.io/s/x0jvqrwyq

`js
import { useDebouncedCallback } from 'use-debounce';

function Input({ defaultValue }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
const debounced = useDebouncedCallback(
// function
(value) => {
setValue(value);
},
// delay in ms
1000
);

// you should use e => debounced(e.target.value) as react works with synthetic events
return (


`js
function ScrolledComponent() {
// just a counter to show, that there are no any unnessesary updates
const updatedCount = useRef(0);
updatedCount.current++;

const [position, setPosition] = useState(window.pageYOffset);

// Debounce callback
const debounced = useDebouncedCallback(
// function
() => {
setPosition(window.pageYOffset);
},
// delay in ms
800
);

useEffect(() => {
const unsubscribe = subscribe(window, 'scroll', debounced);
return () => {
unsubscribe();
};
}, []);

return (


Subsequent calls to the debounced function debounced return the result of the last func invocation.
Note, that if there are no previous invocations it's mean you will get undefined. You should check it in your code properly.

Example:

`javascript
it('Subsequent calls to the debounced function debounced return the result of the last func invocation.', () => {
const callback = jest.fn(() => 42);

let callbackCache;
function Component() {
const debounced = useDebouncedCallback(callback, 1000);
callbackCache = debounced;
return null;
}
Enzyme.mount();

const result = callbackCache();
expect(callback.mock.calls.length).toBe(0);
expect(result).toBeUndefined();

act(() => {
jest.runAllTimers();
});
expect(callback.mock.calls.length).toBe(1);
const subsequentResult = callbackCache();

expect(callback.mock.calls.length).toBe(1);
expect(subsequentResult).toBe(42);
});
`

$3

#### Cancel, maxWait and memoization

1. Both useDebounce and useDebouncedCallback works with maxWait option. This params describes the maximum time func is allowed to be delayed before it's invoked.
2. You can cancel debounce cycle, by calling cancel callback

The full example you can see here https://codesandbox.io/s/4wvmp1xlw4

`javascript
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useDebouncedCallback } from 'use-debounce';

function Input({ defaultValue }) {
const [value, setValue] = useState(defaultValue);
const debounced = useDebouncedCallback(
(value) => {
setValue(value);
},
500,
// The maximum time func is allowed to be delayed before it's invoked:
{ maxWait: 2000 }
);

// you should use e => debounced(e.target.value) as react works with synthetic events
return (


const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);
`

The same API is available for useDebounce calls:
`js
const [value, {cancel, isPending, flush}] = useDebounce(valueToDebounce);
...
cancel() // cancels pending debounce request
isPending() // returns if there is a pending debouncing request
flush() // immediately flushes pending request
`


#### Flush method

useDebouncedCallback has flush 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.

`javascript
import React, { useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';

function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
const debounced = useDebouncedCallback(
(value) => {
asyncFetchData;
},
500,
{ maxWait: 2000 }
);

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

return (
defaultValue={defaultValue}
onChange={(e) => debounced(e.target.value)}
/>
);
}
`

#### isPending method

isPending method shows whether component has pending callbacks. Works for both useDebounce and useDebouncedCallback:

`javascript
import React, { useCallback } from 'react';

function Component({ text }) {
const debounced = useDebouncedCallback(
useCallback(() => {}, []),
500
);

expect(debounced.isPending()).toBeFalsy();
debounced();
expect(debounced.isPending()).toBeTruthy();
debounced.flush();
expect(debounced.isPending()).toBeFalsy();

return {text};
}
`

#### leading/trailing calls

Both useDebounce and useDebouncedCallback work with the leading and trailing options. leading param will execute the function once immediately when called. Subsequent calls will be debounced until the timeout expires. trailing option controls whenever to call the callback after timeout again.

For more information on how leading debounce calls work see: https://lodash.com/docs/#debounce

`javascript
import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';

export default function Input() {
const [text, setText] = useState('Hello');
const [value] = useDebounce(text, 1000, { leading: true });

// value is updated immediately when text changes the first time,
// but all subsequent changes are debounced.
return (


You can provide additional options as a third argument to both useDebounce and useDebouncedCallback:

| option | default | Description | Example |
| ---------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| maxWait | - | Describes the maximum time func is allowed to be delayed before it's invoked | https://github.com/xnimorz/use-debounce#cancel-maxwait-and-memoization |
| leading | - | This param will execute the function once immediately when called. Subsequent calls will be debounced until the timeout expires. | https://github.com/xnimorz/use-debounce#leading-calls |
| trailing | true | This param executes the function after timeout. | https://github.com/xnimorz/use-debounce#leading-calls |
| equalityFn | (prev, next) => prev === next | [useDebounce ONLY] Comparator function which shows if timeout should be started | |

useThrottledCallback

You are able to use throttled callback with this library also (starting 5.2.0 version).
For this purpose use:

`
import useThrottledCallback from 'use-debounce/useThrottledCallback';
`

or

`
import { useThrottledCallback } from 'use-debounce';
`

Several examples:

1. Avoid excessively updating the position while scrolling.

`js
const scrollHandler = useThrottledCallback(updatePosition, 100);
window.addEventListener('scroll', scrollHandler);
`

2. Invoke renewToken when the click event is fired, but not more than once every 5 minutes.
`js
const throttled = useThrottledCallback(renewToken, 300000, { 'trailing': false })
click
`

All the params for useThrottledCallback are the same as for useDebouncedCallback except maxWait` option. As it's not needed for throttle callbacks.

Special thanks:

@tryggvigy — for managing lots of new features of the library like trailing and leading params, throttle callback, etc;

@omgovich — for reducing bundle size.