useThrottleFn

Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.

Demo

Clicks: 0

Throttled: 0

Usage

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

const 
const throttledFn: any
throttledFn = 
import useThrottleFn
useThrottleFn((
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 useThrottleFn
useThrottleFn } 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 throttledFn: any
throttledFn = 
import useThrottleFn
useThrottleFn(() => {
  // ...
}, 
const delay$: any
delay$);
// Changing delay$ applies the new interval from the next call

Leading edge only

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

// Fires immediately on first call, suppresses all subsequent calls within interval
const 
const throttledFn: any
throttledFn = 
import useThrottleFn
useThrottleFn(
  () => {
    // ...
  },
  300,
  { 
edges: {}
edges: ["leading"] }
);

Trailing edge only

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

// Does not fire immediately — fires once after the interval ends
const 
const throttledFn: any
throttledFn = 
import useThrottleFn
useThrottleFn(
  () => {
    // ...
  },
  300,
  { 
edges: {}
edges: ["trailing"] }
);

Type Declarations

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

Source

View on GitHub

Contributors

tigerwest

Changelog

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