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.

Debounced provided callback function for particular interval

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

const { Debounce } = useDebounce();

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

Installation

npm i use-debounce-rv

or

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

Usage example

Import Hook

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

Define Hook

const { Debounce } = useDebounce();

Usage

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)

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 (
        <div>
            <label>Search Data</label>
            <input type="text" value={data} onChange={handleChange} />
        </div>
    );
};

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

Example - 02 (Add delay in function execution)

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 (
        <div>
            <label>Click The Button </label>
            <button onChange={handleClick}>Hey! Click Me</button>
        </div>
    );
};

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