'use client' import { useDebounceCallback } from "@/components/hooks/use-debounce-callback" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { useState, useCallback } from "react" import { toast } from "sonner" import { Clock, Loader2 } from "lucide-react" export function UseDebounceCallbackDemo() { const [value, setValue] = useState("") const [delay, setDelay] = useState(500) const [isPending, setIsPending] = useState(false) const mockApiCall = async (searchTerm: string) => { setIsPending(true) try { await new Promise(resolve => setTimeout(resolve, 500)) toast.success(`API called with: "${searchTerm}"`) } finally { setIsPending(false) } } const debouncedSearch = useDebounceCallback( useCallback(async (searchTerm: string) => { setValue(searchTerm) await mockApiCall(searchTerm) }, []), delay ) return (

{/* Left Column - Interactive Demo */}

Live Demo

Type to see debounced API calls in action

debouncedSearch(e.target.value)} className="pr-8" /> {isPending && ( )}

Debounce delay: {delay}ms

setDelay(newDelay)} min={100} max={2000} step={100} />

Current Value:


              {value || 'Empty'}

{/* Right Column - Documentation */}

Hook Usage

{`const debouncedFn = useDebounceCallback(
  (value) => {
    // Your callback logic
  },
  500, // delay in ms
  {
    leading: false,
    trailing: true,
  }
)

// Control methods
debouncedFn.cancel() // Cancel pending
debouncedFn.flush()  // Execute immediately
debouncedFn.isPending() // Check status`}

Features

Debounces function calls
Configurable delay
Cancel pending executions
Force immediate execution
Check pending status

Common Use Cases

Search input handling
Form validation
API request throttling
Window resize handlers

) }