useIntervalFn

Execute a function repeatedly at a given interval with reactive isActive state and pause/resume control. Returns a Pausable — isActive is a ReadonlyObservable<boolean>.

Demo

Hello

Usage

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

const { 
const isActive: any
isActive, 
const pause: any
pause, 
const resume: any
resume } = 
import useIntervalFn
useIntervalFn(() => {
  
any
console.
any
log("tick");
}, 1000);

// isActive.get() === true while running
// pause() / resume() to control execution

`immediateCallback`

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

import useIntervalFn
useIntervalFn(() => 
any
fetchData(), 5000, { 
immediateCallback: boolean
immediateCallback: true });
// calls fetchData() immediately on resume, then every 5s

Reactive interval

import { 
import useIntervalFn
useIntervalFn } from "@usels/web";
import { 
function observable<T>(): Observable<T | undefined> (+2 overloads)
observable } from "@legendapp/state";

const 
const ms$: any
ms$ = 
observable<unknown>(value: Promise<unknown> | (() => unknown) | unknown): any (+2 overloads)
observable(1000);
import useIntervalFn
useIntervalFn(() => {}, 
const ms$: any
ms$);
// ms$.set(500) → automatically restarts with new interval

Notes

interval must be a positive number. 0 or negative values are passed directly to setInterval, which the browser clamps to ~4ms. Use pause() to stop execution instead of setting interval to 0.

Type Declarations

export interface UseIntervalFnOptions {
    immediate?: boolean;
    immediateCallback?: boolean;
}
export declare function useIntervalFn(cb: AnyFn, interval?: MaybeObservable<number>, options?: UseIntervalFnOptions): Pausable;

Source

View on GitHub

Contributors

tigerwest

Changelog

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