useInterval

Runs a callback on a fixed interval, pausable by passing null, always calling its latest version.

The callback is stored in a ref, so changing it never resets or duplicates the underlying interval.

Install

npx shadcn@latest add @vibra/use-interval

Needs the @vibra registry in your components.json — set it up once.

Examples

Elapsed time

Ticks every second while running.

"use client"

import * as React from "react"
import { PauseIcon, PlayIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { useInterval } from "@/hooks/use-interval"

export default function UseIntervalDemo() {
  const [seconds, setSeconds] = React.useState(0)
  const [running, setRunning] = React.useState(true)

  useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null)

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Elapsed time</CardTitle>
        <CardDescription>Ticks every second while running.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-3xl font-semibold tabular-nums text-foreground">{seconds}s</p>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button type="button" variant="outline" size="sm" onClick={() => setSeconds(0)}>
          Reset
        </Button>
        <Button type="button" variant="secondary" size="sm" onClick={() => setRunning((r) => !r)}>
          {running ? <PauseIcon /> : <PlayIcon />}
          {running ? "Pause" : "Resume"}
        </Button>
      </CardFooter>
    </Card>
  )
}

Props

Prop	Type	Default	Description
callback	() => void	—	Called on every tick; always the latest version passed in, never a stale closure.
delay	number \| null	—	Milliseconds between ticks; pass null to pause without tearing the interval down.

Dependencies

Registry

theme-vibra

Source

hooks/use-interval.ts

import * as React from "react"

/** Runs `callback` every `delay` ms, always invoking its latest version (no stale closures); pass `null` to pause without tearing down. */
export function useInterval(callback: () => void, delay: number | null): void {
  const savedCallback = React.useRef(callback)

  React.useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  React.useEffect(() => {
    if (delay === null) return
    const id = setInterval(() => savedCallback.current(), delay)
    return () => clearInterval(id)
  }, [delay])
}