useDebounce (A ReactJS Hook)

This is a react-JS hook.

It is basically useful to add debounce/delay until some task is happening, once the task will be done then provided callback will be executed.

$3

``js
import { useDebounce } from "use-debounce-rv/dist";

const { Debounce } = useDebounce();

Debounce(() => {}, 1000);
`

Installation

`js
npm i use-debounce-rv
`

or

`js
npm i --legacy-peer-deps use-debounce-rv
`

Usage example

$3

import { useDebounce } from 'use-debounce-rv/dist';

$3

const { Debounce } = useDebounce();

$3

> Debounce(callback, interval)

- callback: _A function to execute after particular interval._
- interval: _Time in milli seconds._


Debounce(() => {}, 1000);

Example -01 (Execute a callback after typing finished)

`js
import { useDebounce } from "use-debounce-rv/dist";

export const SamplePage = () => {
const [data, setData] = useState();
const { Debounce } = useDebounce();

const handleChange = (e) => {
setData(e.target.value);
//Debounce(callback, interval)
//Debounce(() => {}, 1000);
Debounce(() => {
console.log("side effect after typing finshed");
}, 1500);
};
return (

Search Data

);
};
`

> In above example Debounce will execute the console.log once user ends typing.

Example - 02 (Add delay in function execution)

`js
import { useDebounce } from "use-debounce-rv/dist";

export const SamplePage = () => {
const { Debounce } = useDebounce();

const handleClick = (e) => {
//Debounce(callback, interval)
//Debounce(() => {}, 1000);
Debounce(() => {
console.log("I am executed after 2 second");
}, 2000);
};
return (

Click The Button
Hey! Click Me

);
};
``

> In above example Debounce will execute the console.log after 2 second.