useDebounce
π change rapidly, do once
get started
We provide two way of using this package single
or multi
:
npm i @snappmarket/use-debounce
OR
npm i @snappmarket/hooks
usage
import useDebounce from '@snappmarket/use-debounce';
// or
// import { useDebounce } from '@snappmarket/hooks';
const MyComponenet = props => {
const [value, setValue] = useState('');
const [debouncedValue] = useDebounce(value, 200);
/**
* Call api based on debounced value
*/
useEffect(() => {
// do something with debounce
}, [debouncedValue]);
};
source code
import { useState, useEffect } from 'react';
/**
* Debounce setting a value
* @param value
* @param delay
* @returns {[string, fn, fn]}
*/
export default function useDebounce(value, delay) {
// State and setters for debounced value
const [debouncedValue, setDebouncedValue] = useState(value);
let handler;
const canceller = () => {
clearTimeout(handler);
};
useEffect(() => {
handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return canceller;
}, [value]);
return [debouncedValue, canceller, setDebouncedValue];
}