useDebounce

A hook for debouncing a value.

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/useDebounce.json

Usage

useDebounce

import { useDebounce } from "@/hooks/useDebounce";

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

useDebounce(
  () => {
    console.log(`debounced ${value}`);
  },
  2000,
  // make sure to add the dependencies if you want to debounce a value
  [value],
);

useDebounceValue

import { useDebounceValue } from "@/hooks/useDebounce";

const [search, setSearch] = useState("");
const debouncedSearch = useDebounceValue(search, 300);