useDebouncedCallback
A custom React hook to debounce callback functions.
You can use the useDebouncedCallback hook to create a debounced version of a callback function. This is particularly useful when you want to limit the rate at which a function can be executed, such as in scenarios where a user is typing input or making API calls.
For example, in an API call scenario, you could use this hook to ensure that the API is not called on every keystroke but rather after the user has stopped typing for a specified delay.
The difference between useDebouncedCallback and useDebouncedValue is that the former is specifically designed for debouncing callback functions.
Example
Loading...
Install
npx shadcn@latest add https://unlogg.com/r/use-debounced-callback.jsonpnpm dlx shadcn@latest add https://unlogg.com/r/use-debounced-callback.jsonbunx shadcn@latest add https://unlogg.com/r/use-debounced-callback.jsonNotes
API Reference
Parameters
| Prop | Type | Default |
|---|---|---|
delay? | number | — |
callback? | (...args: any[]) => void | — |
Returns
| Prop | Type | Default |
|---|---|---|
handlers.cancel? | () => void | - |
debouncedCallback? | (...args: any[]) => void | - |