useDebounced

Debounce an Observable value. Creates a read-only Observable that updates only after the source value stops changing for the specified delay.

Demo

Source:

Debounced (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 useDebounced
useDebounced } 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 debounced$: any
debounced$ = 
import useDebounced
useDebounced(
const source$: any
source$, 300);
// debounced$.get() updates 300ms after source$ stops changing

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 useDebounced
useDebounced } 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 debounced$: any
debounced$ = 
import useDebounced
useDebounced(
const source$: any
source$, 300, { 
maxWait: number
maxWait: 1000 });
// Forces update every 1000ms even with continuous source changes

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 useDebounced
useDebounced } 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 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 debounced$: any
debounced$ = 
import useDebounced
useDebounced(
const source$: any
source$, 
const delay$: any
delay$);
// Changing delay$ applies from the next debounce cycle

Type Declarations

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

Source

View on GitHub

Contributors

tigerwest

Changelog

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