React useInterval Hook
React useInterval hook for setInterval management. Automatic cleanup and pause/resume functionality for timers with TypeScript support for Next.js apps.
Fighting with stale closures in setInterval?
Join our Discord community for help from other developers.
Ever tried to use setInterval in React and ended up with stale closures, memory leaks, or intervals that won't pause properly? You know the drill—manually clearing intervals on unmount, dealing with callback references getting outdated, fighting with useEffect dependencies. This free open source React useInterval custom hook handles all that interval management complexity so you can focus on building time-based features instead of debugging timer edge cases in your React applications.
useInterval showcase
Declarative interval management with pause/resume controls:
This free open source React hook simplifies periodic updates with TypeScript support for modern JavaScript applications. Whether you're building timers, animations, or data polling in your Next.js projects, this React hook keeps your intervals reliable and clean.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-interval.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-interval.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-interval.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-interval.jsonWhy most interval implementations suck
Look, you could keep using setInterval directly in useEffect. But then you hit the React gotchas—stale closures mean your callbacks reference old state, clearing intervals on every effect run is wasteful, and pause/resume logic gets messy fast.
Most developers manually manage setInterval and clearInterval calls without proper cleanup, leading to memory leaks when components unmount in React applications. Or they create new intervals on every render, causing duplicate timers and performance issues. Some forget to handle stale closures and wonder why their interval callbacks reference outdated state values in TypeScript components.
This React hook uses the latest callback refs pattern to avoid stale closures while providing clean pause/resume functionality in Next.js projects. No more clearInterval bookkeeping or effect dependency nightmares.
Plus it handles all the edge cases—automatic cleanup on unmount, dynamic delay changes, callback updates without restarting the timer. Dan Abramov's proven pattern, ready to use in JavaScript applications.
This free open source React hook manages reliable interval timing while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript components, predictable timing keeps your JavaScript development smooth.
Features
- Automatic cleanup with proper interval clearing when component unmounts in React applications
- Dynamic callback updates without restarting the interval using useRef pattern in TypeScript components
- Pause/resume functionality by passing null delay to pause and number to resume in Next.js projects
- Declarative API that handles common interval management patterns automatically in JavaScript development
- TypeScript support with complete type definitions for callback and delay parameters
- Memory leak prevention with proper cleanup and effect dependency management in React frameworks
- Free open source designed for modern React development workflows
When you'll actually use this
Real talk—this isn't for every timing need in React applications. setTimeout works fine for one-off delays, and CSS animations handle most visual transitions. But when you need periodic JavaScript execution that plays nice with React, this React hook delivers in Next.js projects.
Perfect for:
- Countdown timers - Clock displays and time-sensitive UI updates built with TypeScript
- Data polling - Refresh content from APIs at regular intervals using React patterns
- Animation loops - Control frame-based animations and transitions in JavaScript applications
- Auto-save features - Periodically save user input or form data in React components
- Real-time updates - Live feeds, notifications, and status monitoring in Next.js applications
- Progress indicators - Animate progress bars and loading sequences using TypeScript validation
API Reference
useInterval
| Parameter | Type | Description |
|---|---|---|
callback | () => void | Function to execute at each interval |
delay | number | null | Interval delay in milliseconds, or null to pause |
Common gotchas
Functional state updates required: Always use setState(prev => prev + 1) instead of setState(count + 1) to avoid stale closure issues in React applications, even though this hook handles callback refs properly.
Null delay pause behavior: Pass null to completely pause the interval without cleanup overhead in TypeScript components. Pass a number to resume or change the timing in Next.js projects.
Dynamic callback updates: The React hook uses useRef to store the latest callback in JavaScript development, so you can change what happens each tick without restarting the interval.
Automatic cleanup handling: Intervals are cleared when the component unmounts or when the delay changes in React frameworks, so you don't need to worry about memory leaks.
Delay change behavior: Changing the delay restarts the interval with new timing in TypeScript projects. The callback stays the same but timing resets completely.
Background tab throttling: Browsers may throttle intervals in background tabs to save resources in Next.js applications. Consider this for time-sensitive applications.
Related hooks you will also like
useTimeout
Timeout management with automatic cleanup for single delays
useCountdown
Countdown timer built on interval patterns with full controls
useCounter
Counter state management perfect for interval-based increments
useBoolean
Boolean state for pause/resume and timer control states
useDebounceCallback
Debounce rapid operations that may trigger during intervals
useUnmount
Cleanup management that useInterval relies on internally
Questions you might have
React IntersectionObserver Hook
React useIntersectionObserver hook for element visibility detection. Track viewport intersections with configurable thresholds for Next.js apps.
React useIsClient Hook
React useIsClient hook for client-side detection. Prevent hydration mismatches and safely access browser APIs with TypeScript support for Next.js apps.