tanstack-pacer

Implements debouncing, throttling, rate limiting, queuing, and batching for JavaScript and React applications.

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/firstaxel/neon --skill tanstack-pacer-firstaxel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-pacer
Source: https://github.com/firstaxel/neon/tree/main/.agents/skills/tanstack-pacer
Command: npx skills add https://github.com/firstaxel/neon --skill tanstack-pacer-firstaxel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/pacer, @tanstack/react-pacer.

What problem does it solve? Uncontrolled function execution—like firing an API request on every keystroke or scroll event—wastes resources, degrades performance, and can overwhelm backend services. This Skill provides type-safe utilities to control exactly when and how often functions execute. ## Core Features & Use Cases - Debouncing & Throttling: Delay execution until activity stops (search inputs) or limit execution to once per interval (scroll handlers), with leading/trailing edge control and maxWait guarantees. - Rate Limiting, Queuing & Batching: Enforce hard call limits within time windows, run tasks sequentially with configurable concurrency, and group calls into batches for efficient processing. - React Hooks & Async Variants: Use hooks like useDebouncedCallback and useThrottledState with automatic cleanup, plus async variants that handle abort and cancellation for network requests. - Use Case: A search input that calls an API on every keystroke can be wrapped in a Debouncer with a 300ms wait and maxWait of 1s, so requests fire only after the user pauses typing while still guaranteeing execution during continuous typing. ## Quick Start Ask the AI to add a debounced search handler to your React component using @tanstack/react-pacer with a 300ms wait.

Frequently Asked Questions about tanstack-pacer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debounce a search input in React?▼

Use useDebouncedCallback or useDebouncedState from @tanstack/react-pacer with a wait option like 300ms. The hook delays execution until the user stops typing and handles cleanup automatically on unmount.

What is the difference between debounce and throttle?▼

Debounce waits for a period of inactivity before executing, making it ideal for search inputs. Throttle guarantees execution at most once per interval, making it better for scroll or resize handlers that need periodic updates.

Does TanStack Pacer work outside of React?▼

Yes, the core @tanstack/pacer package is framework-agnostic and provides class APIs like Debouncer, Throttler, and RateLimiter plus factory functions. The @tanstack/react-pacer package only adds React hooks on top.

How do I rate limit API calls in JavaScript?▼

Create a RateLimiter with a limit and window in milliseconds, such as 10 executions per 60 seconds. Calls exceeding the limit are rejected, and you can use the onReject callback to notify users.

Why does my debounced function never fire during continuous events?▼

Debounce resets its timer on every call, so continuous activity can postpone execution indefinitely. Set the maxWait option to force execution after a maximum elapsed time, such as 1000ms.

When should I use async debounce instead of regular debounce?▼

Use AsyncDebouncer or asyncDebounce for network requests and other promise-based operations. Async variants handle abort and cancellation semantics that the synchronous versions do not manage.