Skip to content

useInterval

A thin wrapper around useIntervalFn that exposes a ReadonlyObservable<number> counter that increments on each tick.

Demo

Interval fired:0
Counter increments every 200ms.

Usage

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

const 
const counter: any
counter = 
import useInterval
useInterval(1000);
// counter.get() → 0 initially, then 1, 2, 3... every second

With callback

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

import useInterval
useInterval(1000, {
  
callback: (count: any) => any
callback: (
count: any
count) => 
any
console.
any
log("tick:", 
count: any
count),
});

With pause/resume/reset controls

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

const { 
const counter$: any
counter$, 
const reset: any
reset, 
const isActive$: any
isActive$, 
const pause: any
pause, 
const resume: any
resume } = 
import useInterval
useInterval(1000, {
  
controls: boolean
controls: true,
});

const pause: any
pause(); // stops ticking
const resume: any
resume(); // restarts
const reset: any
reset(); // counter → 0

Manual start (`immediate: false`)

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

const { 
const counter$: any
counter$, 
const resume: any
resume } = 
import useInterval
useInterval(1000, {
  
controls: boolean
controls: true,
  
immediate: boolean
immediate: false,
});

const resume: any
resume(); // start manually

Reactive interval

import { 
import useInterval
useInterval } 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);
const 
const counter: any
counter = 
import useInterval
useInterval(
const ms$: any
ms$);

const ms$: any
ms$.
any
set(500); // restarts with 500ms period

Type Declarations

export interface UseIntervalOptions<Controls extends boolean = false> {
    controls?: Controls;
    immediate?: boolean;
    callback?: (count: number) => void;
}
export interface UseIntervalReturn {
    counter$: ReadonlyObservable<number>;
    reset: Fn;
}
export declare function useInterval(interval?: MaybeObservable<number>, options?: UseIntervalOptions<false>): ReadonlyObservable<number>;
export declare function useInterval(interval: MaybeObservable<number>, options: UseIntervalOptions<true>): Readonly<UseIntervalReturn & Pausable>;

Source

Contributors

tigerwest

Changelog

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