`useInterval`

A managed setInterval. Pass delay = null to pause without unmounting. The latest callback reference is always invoked, so closure-captured values stay fresh.

Used internally by Timeago for its periodic re-render.


import { useState } from 'react'
import { useInterval } from '@wire-ui/react'
 
function Ticker() {
  const [count, setCount] = useState(0)
  const { isRunning, start, stop } = useInterval(() => setCount((c) => c + 1), 1000, {
    autoStart: true,
  })
 
  return (
    <>
      <span>{count}</span>
      <button onClick={isRunning ? stop : start}>
        {isRunning ? 'Pause' : 'Resume'}
      </button>
    </>
  )
}

Parameters

Param	Type	Description
`callback`	`() => void`	Fires on every tick.
`delay`	`number \| null`	Milliseconds between ticks. `null` pauses the interval.
`options`	`{ autoStart?: boolean, immediate?: boolean }`	`autoStart` runs on mount; `immediate` fires the callback once on start.

Returns

Key	Type	Description
`isRunning`	`boolean`	`true` while the interval is active.
`start`	`() => void`	Begin ticking.
`stop`	`() => void`	Pause ticking.
`reset`	`() => void`	Cancel and restart with the current `delay`.