Appearance
useWatchDebounced
Debounced watch. The callback will only be invoked after the source stops changing for the specified duration
Demo
Usage
Similar to useWatch, but offering extra options debounce and maxWait which will be applied to the callback function.
tsx
import { useWatchDebounced } from '@reause/shared'
useWatchDebounced(
input,
() => { console.log('changed!') },
{ debounce: 500, maxWait: 1000 },
)Options
| Option | Type | Default | Description |
|---|---|---|---|
debounce | number | 0 | Debounce delay in ms |
maxWait | number | — | Maximum wait time before forced invocation |
immediate | boolean | false | Fire the callback once on mount with the current value (still debounced) |
Fire the callback once on mount with the current value (still debounced):
tsx
import { useWatchDebounced } from '@reause/shared'
useWatchDebounced(input, () => console.log('changed!'), { immediate: true })Type Declarations
ts
export interface UseWatchDebouncedOptions extends DebounceFilterOptions {
debounce?: number;
immediate?: boolean;
}
export interface DebounceFilterOptions {
maxWait?: number;
rejectOnCancel?: boolean;
}
export interface UseWatchCallback<T = any> {
(value: T, oldValue: T | undefined): void;
}
export function useWatchDebounced<T extends any[]>(source: readonly [
...T
], callback: UseWatchCallback<[
...T
]>, options?: UseWatchDebouncedOptions): void
export function useWatchDebounced<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchDebouncedOptions): void
export function useDebounceFn<T extends FunctionArgs>(fn: T, ms?: number, options?: DebounceFilterOptions): UseDebounceFnReturn<T>
export function useWatch<T extends any[]>(source: readonly [
...T
], callback: UseWatchCallback<[
...T
]>, options?: UseWatchOptions): void
export function useWatch<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchOptions): voidSource
Contributors
