useDebounced

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

Demo

Debounced input

Type to see the debounced value update after 500ms of inactivity.

Source

—

Debounced (500ms)

—

Usage

Hook

import { useDebounced, useObservable } from "@usels/web";

function Component() {
  const source$ = useObservable("hello");
  const debounced$ = useDebounced(source$, { ms: 300 });
  // debounced$.get() updates 300ms after source$ stops changing
}

Scope

import { createDebounced, observable } from "@usels/web";

function Component() {
  "use scope"
  const source$ = observable("hello");
  const debounced$ = createDebounced(source$, { ms: 300 });
}

maxWait — cap maximum delay

Hook

import { useDebounced, useObservable } from "@usels/web";

function Component() {
  const source$ = useObservable(0);
  const debounced$ = useDebounced(source$, { ms: 300, maxWait: 1000 });
  // Forces update every 1000ms even with continuous source changes
}

Scope

import { createDebounced, observable } from "@usels/web";

function Component() {
  "use scope"
  const source$ = observable(0);
  const debounced$ = createDebounced(source$, { ms: 300, maxWait: 1000 });
}

Type

Parameters

Parameter	Type	Description
source$	Observable<T>	Source Observable to debounce.
options	DebouncedOptions (optional)	Debounce configuration (ms, maxWait).

DebouncedOptions

Option	Type	Default	Description
ms	number	200	Debounce delay in milliseconds.
maxWait	MaybeObservable<number | undefined>	-	Maximum time in milliseconds to wait before forcing invocation, regardless of how frequently the debounced function is called. Accepts a plain number or an Observable<number>.

Returns

ReadonlyObservable<T>

A ReadonlyObservable that reflects the debounced source value.

Source

View on GitHub