Docs
useDebounceCallback

Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.

Installation

pnpm dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-debounce-callback

Usage

"use client"
 
import * as React from "react"
 
import { useDebounceCallback } from "@/hooks/use-debounce-callback"
 
export function Component() {
  const [value, setValue] = React.useState("")
 
  const debounced = useDebounceCallback(setValue, 500)
 
  return (
    <div>
      <p>Debounced value: {value}</p>
 
      <input
        type="text"
        defaultValue={value}
        onChange={(event) => debounced(event.target.value)}
      />
    </div>
  )
}

API Reference

Parameters

NameTypeDescription
func() => voidThe cleanup function to be executed on unmount.