Utilities

useDebounceFn

Debounce execution of a function.

Debounce execution of a function. Returns a debounced version that fires after the delay elapses with no further calls.

Demo

useDebounceFn

500ms delay

Delays function execution until 500ms after the last call.

Input

—

Debounced

—

Call Count

Usage

Hook
Scope

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

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

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

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

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

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

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

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

maxWait — cap maximum delay

Hook
Scope

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

function Component() {
  // Forces execution every 1000ms even with continuous calls
  const debouncedFn = useDebounceFn(
    () => { /* ... */ },
    300,
    { maxWait: 1000 }
  );
}

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

function Component() {
  "use scope"
  const { debouncedFn } = createDebounceFn(
    () => { /* ... */ },
    300,
    { maxWait: 1000 }
  );
}

Source

View on GitHub