useDebounceFn

Debounce execution of a function.

Demo

Input:

Debounced:

Update count: 0

Usage

import { 
import useDebounceFn
useDebounceFn } from "@usels/web";

const 
const debouncedFn: any
debouncedFn = 
import useDebounceFn
useDebounceFn((
value: string
value: string) => {
  
any
console.
any
log(
value: string
value);
}, 250);

With reactive delay:

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useDebounceFn
useDebounceFn } from "@usels/web";

const 
const delay$: any
delay$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable(300);
const 
const debouncedFn: any
debouncedFn = 
import useDebounceFn
useDebounceFn(() => {
  // ...
}, 
const delay$: any
delay$);
// Changing delay$ applies the new delay from the next call

With maxWait:

import { 
import useDebounceFn
useDebounceFn } from "@usels/web";

// Forces execution every 1000ms even with continuous calls
const 
const debouncedFn: any
debouncedFn = 
import useDebounceFn
useDebounceFn(
  () => {
    // ...
  },
  300,
  { 
maxWait: number
maxWait: 1000 }
);

With leading edge:

import { 
import useDebounceFn
useDebounceFn } from "@usels/web";

// Fires immediately on first call, ignores subsequent calls within delay
const 
const debouncedFn: any
debouncedFn = 
import useDebounceFn
useDebounceFn(
  () => {
    // ...
  },
  300,
  { 
edges: {}
edges: ["leading"] }
);

Type Declarations

export declare function useDebounceFn<T extends AnyFn>(fn: T, ms?: MaybeObservable<number>, options?: DebounceFilterOptions): PromisifyFn<T>;

Source

View on GitHub

Contributors

tigerwest

Changelog

a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)