π Small (~0.2kb) debounce effect hook for React with TypeScript support
![FOSSA Status](https://camo.githubusercontent.com/08449cb04e01e9796a197a1eed7d762adb9c81aa65ad647342d542a613ef7874/68747470733a2f2f6170702e666f7373612e636f6d2f6170692f70726f6a656374732f6769742532426769746875622e636f6d253246656176616d2532467573652d6465626f756e63792e7376673f747970653d736869656c64)
![](assets/example.gif)
- π No dependencies.
- ποΈβ Tiny. ~0.2kb.
- π¦Ύ Performance. Used by requestAnimationFrame.
- π Types. Support TypeScript.
- π£ Easy. Use like React effect or function.
import React, { useState } from 'react';
import { useDebouncyEffect } from 'use-debouncy';
const App = () => {
const [value, setValue] = useState('');
useDebouncyEffect(
() => fetchData(value), // function debounce
400, // number of milliseconds to delay
[value], // array values that the debounce depends (like as useEffect)
);
return <input value={value} onChange={(event) => setValue(event.target.value)} />;
};
import React, { useState } from 'react';
import { useDebouncyFn } from 'use-debouncy';
const App = () => {
const handleChange = useDebouncyFn(
(event) => fetchData(event.target.value), // function debounce
400, // number of milliseconds to delay
);
return <input value={value} onChange={handleChange} />;
};
function useDebouncyEffect(fn: () => void, wait?: number, deps?: any[]): void;
Prop |
Required |
Default |
Description |
fn |
β |
|
Debounce callback. |
wait |
|
0 |
Number of milliseconds to delay. |
deps |
|
[] |
Array values that the debounce depends (like as useEffect). |
function useDebouncyFn(fn: (...args: any[]) => void, wait?: number): (...args: any[]) => void;
Prop |
Required |
Default |
Description |
fn |
β |
|
Debounce handler. |
wait |
|
0 |
Number of milliseconds to delay. |
![js-standard-style](https://camo.githubusercontent.com/7166bd080fe0035dac8d677ddb7c9f48833c51c4923c609e04a44bdab9f07ebb/68747470733a2f2f63646e2e7261776769742e636f6d2f7374616e646172642f7374616e646172642f6d61737465722f62616467652e737667)
![FOSSA Status](https://camo.githubusercontent.com/594b03459f24b581ba7da497f05013c3f04540aadb96337eff031c892f07323a/68747470733a2f2f6170702e666f7373612e636f6d2f6170692f70726f6a656374732f6769742532426769746875622e636f6d253246656176616d2532467573652d6465626f756e63792e7376673f747970653d6c61726765)