useInterval
React hook for managing setInterval with automatic cleanup and pause/resume functionality. Perfect for React applications requiring periodic updates with Next.js integration and TypeScript support.
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.jsonFeatures
- Automatic cleanup with proper interval clearing when component unmounts or delay changes
- Dynamic callback updates without restarting the interval using useRef pattern
- Pause/resume functionality by passing null delay to pause and number to resume
- Declarative API that handles common interval management patterns automatically
- TypeScript support with complete type definitions for callback and delay parameters
- Memory leak prevention with proper cleanup and effect dependency management
Examples
Color Animation
Simple color-cycling animation that demonstrates basic useInterval functionality.
Use Cases
This free open source React hook works well for:
- Timers and counters - Create countdown timers and increment counters built with Next.js
- Animation loops - Control animation frames and transitions using TypeScript patterns
- Data polling - Periodically fetch data from APIs with pause/resume capability
- Auto-save features - Automatically save user input at regular intervals
- Real-time updates - Update UI components with live data feeds
- Progress indicators - Animate progress bars and loading states with intervals
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 |
Usage Pattern
const [count, setCount] = useState(0);
const [isRunning, setIsRunning] = useState(true);
// Basic usage - runs every 1000ms
useInterval(() => {
setCount(count => count + 1);
}, 1000);
// With pause/resume - null pauses the interval
useInterval(() => {
setCount(count => count + 1);
}, isRunning ? 1000 : null);
// Dynamic delay
const [delay, setDelay] = useState(1000);
useInterval(() => {
setCount(count => count + 1);
}, delay);Implementation Notes
- Hook uses useRef to store the latest callback, preventing interval restart on callback changes
- Automatically clears previous intervals when delay changes or component unmounts
- Passing null as delay completely pauses the interval without cleanup/restart overhead
- Callback function can safely reference current state values without causing interval restart
- Compatible with both functional and class component patterns through refs
- Follows React hooks conventions for consistent behavior and memory management
- Based on Dan Abramov's popular useInterval hook pattern for reliable interval handling
useIntersectionObserver
Track element visibility and viewport intersection with configurable thresholds. Perfect for React applications requiring scroll-triggered animations with Next.js integration and TypeScript support.
useIsClient
React hook that determines if the code is running on the client side (in the browser) for conditional rendering and SSR compatibility.