Utilities

useThrottleFn

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

Demo

useThrottleFn

1000ms limit

Limits function execution to at most once per 1000ms, no matter how fast you click.

Clicks

Throttled Calls

Usage

Hook
Scope

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

function 
function Component(): void
Component() {
  const 
const throttledFn: any
throttledFn = 
import useThrottleFn
useThrottleFn((
value: string
value: string) => {
    
any
console.
any
log(
value: string
value);
  }, 250);
}

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

function Component() {
  "use scope"
  const { throttledFn } = createThrottleFn((value: string) => {
    console.log(value);
  }, 250);
}

Reactive interval

Hook
Scope

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

function Component() {
  const delay$ = useObservable(300);
  const throttledFn = useThrottleFn(() => {
    // ...
  }, delay$);
  // Changing delay$ applies the new interval from the next call
}

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

function Component() {
  "use scope"
  const delay$ = observable(300);
  const { throttledFn } = createThrottleFn(() => {
    // ...
  }, delay$);
}

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

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

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

function Component() {
  "use scope"
  const { throttledFn } = createThrottleFn(
    () => { /* ... */ },
    300,
    { edges: ["leading"] }
  );
}

Trailing edge only

Hook
Scope

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

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

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

function Component() {
  "use scope"
  const { throttledFn } = createThrottleFn(
    () => { /* ... */ },
    300,
    { edges: ["trailing"] }
  );
}

Source

View on GitHub