Reactivity

useThrottled

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

Demo

Throttled input

Type to see the throttled value update at most every 500ms.

Source

—

Throttled (500ms)

—

Usage

Hook
Scope

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

function 
function Component(): void
Component() {
  const 
const source$: any
source$ = 
import useObservable
useObservable("hello");
  const 
const throttled$: any
throttled$ = 
import useThrottled
useThrottled(
const source$: any
source$, { 
ms: number
ms: 300 });
  // throttled$.get() updates at most once per 300ms
}

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

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

Leading edge only

Hook
Scope

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

function Component() {
  const source$ = useObservable("hello");
  // Updates immediately on change, suppresses further updates within interval
  const throttled$ = useThrottled(source$, { ms: 300, edges: ["leading"] });
}

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

function Component() {
  "use scope"
  const source$ = observable("hello");
  const throttled$ = createThrottled(source$, { ms: 300, edges: ["leading"] });
}

Trailing edge only

Hook
Scope

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

function Component() {
  const source$ = useObservable("hello");
  // Does not update immediately — updates once after the interval ends
  const throttled$ = useThrottled(source$, { ms: 300, edges: ["trailing"] });
}

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

function Component() {
  "use scope"
  const source$ = observable("hello");
  const throttled$ = createThrottled(source$, { ms: 300, edges: ["trailing"] });
}

Type

Parameters

Parameter	Type	Description
`source$`	`Observable<T>`	Source Observable to throttle.
`options`	`ThrottledOptions` (optional)	Throttle configuration (ms, edges).

ThrottledOptions

Option	Type	Default	Description
`ms`	`number`	`200`	Throttle interval in milliseconds.
`edges`	`("leading" \| "trailing")[]`	`-`	-

Returns

ReadonlyObservable<T>

A ReadonlyObservable that reflects the throttled source value.

Source

View on GitHub