Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useInterval

setInterval that can pause and always runs the latest callback.

HooksState@gaudi/design-system/hooks/state/use-intervalView in StorybookSource

Calls the callback every delay ms. Pass null to pause; the callback can read fresh state without restarting the interval.

Usage

import { useInterval } from '@gaudi/design-system/hooks';
useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);

Examples

A pausable timer

Storybook

API

2 options
1 return value

Accessibility

Content that moves or updates automatically for more than five seconds needs a pause control (WCAG 2.2.2); pass null while paused.

Notes

  • Pause in hidden tabs with usePageVisibility.
usePageVisibilityWhether the tab is visible, to pause work in the background.useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.