tanstack-pacer-patterns-betalisted
Install: claude install-skill smicolon/ai-kit
# TanStack Pacer Patterns (Beta)
> **Beta Library**: TanStack Pacer is in beta. APIs may change between versions.
TanStack Pacer provides utilities for rate limiting, debouncing, throttling, and async queuing.
## Debounce
Delay execution until input stops for a specified time.
### Basic Debounce
```typescript
import { debounce } from '@tanstack/pacer'
const debouncedSearch = debounce((query: string) => {
console.log('Searching:', query)
return fetch(`/api/search?q=${query}`)
}, 300)
// Only executes after 300ms of no calls
debouncedSearch('h')
debouncedSearch('he')
debouncedSearch('hel')
debouncedSearch('hell')
debouncedSearch('hello') // Only this executes
```
### Debounce in React
```typescript
import { useDebounce } from '@tanstack/pacer-react'
import { useState } from 'react'
function SearchInput() {
const [query, setQuery] = useState('')
const debouncedQuery = useDebounce(query, 300)
// Use debouncedQuery for API calls
const { data } = useQuery({
queryKey: ['search', debouncedQuery],
queryFn: () => searchApi.search(debouncedQuery),
enabled: debouncedQuery.length > 0,
})
return (
<div>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
{data && <SearchResults results={data} />}
</div>
)
}
```
### Debounced Callback
```typescript
import { useDebouncedCallback } from '@tanstack/pacer-react'
function AutoSaveEditor({ postId }: { postId: string