useDebounce

Debounces any function with easy.

Installation

npx rabbithook@latest add use-debounce

Usage

App.tsx

import useDebounce from "@/hooks/use-debounce";

function Component() {
  const [value, setValue] = useState("");

  useDebounce(() => {
    console.log("Debounced function called with value: ", value);
  }, 3000, [value]);

  return (
    <input value={value} onChange={event => setValue(event.target.value)} />
  )
}

Code

Typescript

use-debounce.ts

import { useEffect } from "react";
import useTimeout from "../use-timeout"

function useDebounce(callback: Function, delay: number, dependencies: any[]) {
  const { reset, clear } = useTimeout(callback, delay);

  useEffect(reset, [...dependencies, reset])
  useEffect(clear, [])
}


export default useDebounce;

Javascript

use-debounce.js

import { useEffect } from "react";
import useTimeout from "../use-timeout";

function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay);

  useEffect(reset, [...dependencies, reset]);
  useEffect(clear, []);
}

export default useDebounce;