useThrottled

Throttle an Observable value. Creates a read-only Observable that updates at most once per interval when the source value changes.

Demo

Source:

Throttled (500ms):

Usage

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 useThrottled
useThrottled } from "@usels/web";

const 
const source$: any
source$ = 
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("hello");
const 
const throttled$: any
throttled$ = 
import useThrottled
useThrottled(
const source$: any
source$, 300);
// throttled$.get() updates at most once per 300ms

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 useThrottled
useThrottled } from "@usels/web";

const 
const source$: any
source$ = 
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(0);
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 throttled$: any
throttled$ = 
import useThrottled
useThrottled(
const source$: any
source$, 
const delay$: any
delay$);
// Changing delay$ applies from the next throttle cycle

Leading edge only

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 useThrottled
useThrottled } from "@usels/web";

const 
const source$: any
source$ = 
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("hello");
// Updates immediately on change, suppresses further updates within interval
const 
const throttled$: any
throttled$ = 
import useThrottled
useThrottled(
const source$: any
source$, 300, { 
edges: {}
edges: ["leading"] });

Trailing edge only

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 useThrottled
useThrottled } from "@usels/web";

const 
const source$: any
source$ = 
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("hello");
// Does not update immediately — updates once after the interval ends
const 
const throttled$: any
throttled$ = 
import useThrottled
useThrottled(
const source$: any
source$, 300, { 
edges: {}
edges: ["trailing"] });

Type Declarations

export declare function useThrottled<T>(value: MaybeObservable<T>, ms?: MaybeObservable<number>, options?: ThrottleFilterOptions): ReadonlyObservable<T>;

Source

View on GitHub

Contributors

tigerwest

Changelog

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