use-interval

Installation

npx shadcn add @limeplay/use-interval

Example Usage

Use useInterval to create intervals that automatically clean up when the component unmounts.

import { useInterval } from "@/hooks/limeplay/use-interval"

export function CustomPolling() {
  useInterval(() => {
    // This runs every 1000ms
    console.log("Polling...")
  }, 1000)

  return <div>Polling component</div>
}

To clear the interval, pass null as the delay:

import { useState } from "react"
import { useInterval } from "@/hooks/limeplay/use-interval"

export function ConditionalInterval() {
  const [isActive, setIsActive] = useState(true)

  useInterval(() => {
    console.log("Running...")
  }, isActive ? 1000 : null) // Interval clears when isActive is false

  return (
    <button onClick={() => setIsActive(!isActive)}>
      {isActive ? "Stop" : "Start"}
    </button>
  )
}

Understanding

The use-interval hook is a utility hook that wraps setInterval with proper React lifecycle management. It:

• Automatically cleans up intervals when the component unmounts
• Updates the callback reference when it changes
• Supports clearing the interval by passing null as the delay
• Works in both client and server environments (uses useLayoutEffect on client, useEffect on server)

This hook is used internally by use-timeline for polling timeline state updates.

API Reference

useInterval(callback, delay)

Creates an interval that invokes a callback function at a specified delay.

Parameters

Returns

This hook does not return a value. The interval is automatically managed and cleaned up.