use-debounce-state

creates a bottleneck to the definition of a state, limits concurrency.

Module

import { useDebounceState } from "@atomico/hooks/use-debounce-state";

Syntax

this hook is similar to useState, but the purpose of this hook is to bottleneck the state at update time

const [state, setState] = useDebounceState(
    delay:number, 
    initialState: any,
    mode?: "fps" | "timeout" | "idle"
);

mode differences

1. fps:

   1. if delay is set to 1, the update is executed for each cycle of requestAnimationFrame(60fps),

   2. if delay is defined as 2, the update is executed for every 2 cycle of requestAnimationFrame(30fps)

2. timeout: the delay will be the milliseconds for setTimeout

3. idle : the delay will be the milliseconds for requestIdleCallback

Example

WebComponents.devWebComponents.dev