Documentation
useDebounce
A hook to debounce values and prevent excessive re-renders or API calls.
Installation
pnpm install @rouf-dev/pantheon-uiUsage
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 debouncedelay - Delay in milliseconds (default: 500)