Overview
TanStack Pacer provides a unified, type-safe toolkit for controlling function execution timing. It offers class-based APIs, factory functions, and React hooks for debouncing, throttling, rate limiting, queuing, and batching.
Core: @tanstack/pacer
React: @tanstack/react-pacer
Status: Beta
Installation
Debouncing
Delays execution until after a period of inactivity.
Class API
Factory Function
React Hooks
Throttling
Limits execution to at most once per interval.
Class API
React Hooks
Rate Limiting
Controls execution with a maximum count within a time window.
Class API
React Hooks
Queuing
Sequential execution with configurable concurrency.
Batching
Groups calls for combined processing.
Async Variants
Choosing the Right Utility
Leading vs Trailing Edge
- Leading (
leading: true): Execute immediately, suppress until wait expires. Good for button clicks. - Trailing (
trailing: true): Execute after activity stops. Good for search inputs. - Both: Execute immediately AND after final wait. Good for scroll throttling.
Best Practices
- Use
maxWaitwith debouncing to guarantee execution during continuous activity - Use async variants for network requests (handle abort/cancellation)
- React hooks handle cleanup automatically - no manual teardown needed
- Use
setOptionsfor dynamic reconfiguration (e.g., reducing wait for power users) - Compose utilities for complex scenarios (rate-limited queue)
- Use
onRejecton RateLimiter to inform users when they're rate limited
Common Pitfalls
- Using debounce when you need throttle (debounce waits for inactivity, throttle guarantees periodic execution)
- Not using
maxWaitwith debounce for long-running continuous events - Creating new instances on every render (use hooks or module-level)
- Forgetting cleanup in non-React environments (call
cancel())


