Documentation

useDebounce

A hook to debounce values and prevent excessive re-renders or API calls.

Installation

pnpm install @rouf-dev/pantheon-ui

Usage

import { useDebounce } from "@rouf-dev/pantheon-ui";
import { useState, useEffect } from "react";

export default function SearchComponent() {
  const [search, setSearch] = useState("");
  const debouncedSearch = useDebounce(search, 500);

  useEffect(() => {
    // API call with debounced value
    console.log("Searching for:", debouncedSearch);
  }, [debouncedSearch]);

  return (
    <input
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

Parameters

value - The value to debounce
delay - Delay in milliseconds (default: 500)