useTimeoutFn

Execute a function after a given delay with reactive isPending$ state and manual start/stop control. Returns a Stoppable — isPending$ is an Observable<boolean> you can subscribe to.

Demo

Please wait for 3 seconds

Restart

Usage

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

const { isPending$, start, stop } = useTimeoutFn(() => {
  console.log("fired!");
}, 1000);

// isPending$.get() === true while waiting
// stop() cancels the pending timeout
// start() restarts the timer (resets if already pending)

Manual start (immediate: false)

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

const { isPending$, start } = useTimeoutFn(() => console.log("done"), 500, { immediate: false });

// call start() manually when ready
start();

Reactive interval (MaybeObservable)

import { useTimeoutFn } from "@usels/web";
import { observable } from "@legendapp/state";

const delay$ = observable(1000);
const { start } = useTimeoutFn(() => {}, delay$);
// start() always reads current value of delay$

immediateCallback

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

const { start } = useTimeoutFn((msg?: string) => console.log("fired", msg), 1000, {
  immediate: false,
  immediateCallback: true,
});

start("hello");
// → cb() called immediately with no args
// → cb("hello") called again after 1000ms

Type Declarations

export interface UseTimeoutFnOptions {
    immediate?: boolean;
    immediateCallback?: boolean;
}
export declare function useTimeoutFn<CallbackFn extends AnyFn>(cb: CallbackFn, interval: MaybeObservable<number>, options?: UseTimeoutFnOptions): Stoppable<Parameters<CallbackFn> | []>;

Source

View on GitHub

Contributors

• tigerwest

Changelog

• a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)