TanStack Pacer

https://tanstack.com/pacer/latest/docs
Admin
TanStack Pacer is a beta library for managing pagination and data fetching patterns in web...
Tokens:246,704
Snippets:1,885
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Initialize App3 Component Structure

Source: https://tanstack.com/pacer/latest/docs/framework/react/examples/useRateLimitedCallback

Initial setup for a third example component.

```typescript
function App3() {
  const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
  const [currentValue, setCurrentValue] = useState(50)
  const [limitedValue, setLimitedValue] = useState(50)
```

--------------------------------

### start()

Source: https://tanstack.com/pacer/latest/docs/reference/classes/AsyncQueuer

Starts processing items in the queue.

```APIDOC
## start()

### Description
Starts processing items in the queue. If the queuer is already running, this method does nothing.

### Returns
- **void**
```

--------------------------------

### Install Solid Adapter

Source: https://tanstack.com/pacer/latest/docs/framework/solid/adapter

Install the package via npm.

```shell
npm install @tanstack/solid-pacer
```

--------------------------------

### Initialize App3 State

Source: https://tanstack.com/pacer/latest/docs/framework/react/examples/useThrottler

Partial code block showing the initial state setup for a third example.

```typescript
function App3() {
  const [instantExecutionCount, setInstantExecutionCount] = useState(0)
  const [currentValue, setCurrentValue] = useState(50)
  const [throttledValue, setThrottledValue] = useState(50)
```

--------------------------------

### Install Preact Adapter

Source: https://tanstack.com/pacer/latest/docs/framework/preact/adapter

Install the required package for Preact integration.

```shell
npm install @tanstack/preact-pacer
```

--------------------------------

### Usage Examples for injectRateLimiter

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/injectRateLimiter

Examples demonstrating default behavior, state tracking opt-in, monitoring status, and accessing state.

```typescript
// Default behavior - no reactive state subscriptions
const rateLimiter = injectRateLimiter(apiCall, {
  limit: 5,
  window: 60000,
  windowType: 'sliding',
});

// Opt-in to track execution count changes
const rateLimiter = injectRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ executionCount: state.executionCount })
);

// Monitor rate limit status
const handleClick = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    rateLimiter.maybeExecute(data);
  } else {
    showRateLimitWarning();
  }
};

// Access the selected state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state();
```

--------------------------------

### Usage Examples for injectRateLimitedSignal

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/injectRateLimitedSignal

Examples showing default behavior without reactive subscriptions and how to opt-in to state tracking using a selector.

```typescript
// Default behavior - no reactive state subscriptions
const rateLimited = injectRateLimitedSignal(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to reactive updates when limit state changes
const rateLimited = injectRateLimitedSignal(
  0,
  { limit: 5, window: 60000 },
  (state) => ({ rejectionCount: state.rejectionCount })
);
```

--------------------------------

### Queue Usage Examples

Source: https://tanstack.com/pacer/latest/docs/reference/functions/queue

Demonstrates basic sequential processing and priority-based queue configuration.

```typescript
// Basic sequential processing
const processItems = queue<number>((n) => console.log(n), {
  wait: 1000,
  onItemsChange: (queuer) => console.log(queuer.peekAllItems())
});
processItems(1); // Logs: 1
processItems(2); // Logs: 2 after 1 completes

// Priority queue
const processPriority = queue<number>((n) => console.log(n), {
  getPriority: n => n // Higher numbers processed first
});
processPriority(1);
processPriority(3); // Processed before 1
```

--------------------------------

### createThrottledSignal Usage Examples

Source: https://tanstack.com/pacer/latest/docs/framework/solid/reference/functions/createThrottledSignal

Examples demonstrating default behavior, reactive state subscription via selectors, custom leading/trailing options, and accessing throttler state.

```tsx
// Default behavior - no reactive state subscriptions
const [value, setValue, throttler] = createThrottledSignal(0, { wait: 1000 });

// Opt-in to reactive updates when pending state changes (optimized for loading indicators)
const [value, setValue, throttler] = createThrottledSignal(
  0,
  { wait: 1000 },
  (state) => ({ isPending: state.isPending })
);

// With custom leading/trailing behavior
const [value, setValue] = createThrottledSignal(0, {
  wait: 1000,
  leading: true,   // Update immediately on first change
  trailing: false  // Skip trailing edge updates
});

// Access throttler state via signals
console.log('Executions:', throttler.state().executionCount);
console.log('Is pending:', throttler.state().isPending);
console.log('Last execution:', throttler.state().lastExecutionTime);
console.log('Next execution:', throttler.state().nextExecutionTime);
```

--------------------------------

### Install Solid Devtools Adapter

Source: https://tanstack.com/pacer/latest/docs/installation.md

Install the Solid devtools adapter and Pacer devtools plugin as dev dependencies.

```bash
npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools --save-dev
```

--------------------------------

### Install Solid Pacer Devtools

Source: https://tanstack.com/pacer/latest/docs/devtools.md

Install the necessary packages for Solid Pacer Devtools using npm.

```sh
npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools
```

--------------------------------

### Usage Examples

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/injectQueuer

Demonstrates default initialization, state selection, adding items, and accessing the current state.

```typescript
// Default behavior - no reactive state subscriptions
const queue = injectQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 }
);

// Opt-in to track queue contents changes
const queue = injectQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({ items: state.items, size: state.size })
);

// Add items
queue.addItem('task1');

// Access the selected state
const { items, isRunning } = queue.state();
```

--------------------------------

### Example usage of batch()

Source: https://tanstack.com/pacer/latest/docs/reference/functions/batch

Demonstrates creating a batcher with a maximum size and an execution callback.

```typescript
const batchItems = batch<number>(
  (items) => console.log('Processing:', items),
  {
    maxSize: 3,
    onExecute: (batch, batcher) => console.log('Batch executed:', batch)
  }
);

batchItems(1);
batchItems(2);
batchItems(3); // Triggers batch processing
```

--------------------------------

### start() / stop() / clear() / reset()

Source: https://tanstack.com/pacer/latest/docs/reference/classes/Queuer

Methods to control the lifecycle and state of the queue.

```APIDOC
## start()
Starts processing items in the queue.

## stop()
Stops processing items in the queue without clearing it.

## clear()
Removes all pending items from the queue.

## reset()
Resets the queuer state to its default values.
```

--------------------------------

### Install Solid Pacer Adapter

Source: https://tanstack.com/pacer/latest/docs/installation.md

Install the Solid adapter for TanStack Pacer using npm, yarn, or pnpm.

```bash
npm install @tanstack/solid-pacer
```

--------------------------------

### useDebouncedState Usage Examples

Source: https://tanstack.com/pacer/latest/docs/framework/preact/reference/functions/useDebouncedState

Examples showing default behavior, opt-in reactive state subscriptions using selectors, and updating the debounced value.

```tsx
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
  wait: 500 // Wait 500ms after last keystroke
});

// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
  '',
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
  '',
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when debouncing status changes (optimized for status display)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
  '',
  { wait: 500 },
  (state) => ({
    status: state.status,
    canLeadingExecute: state.canLeadingExecute
  })
);

// Update value - will be debounced
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.state;
```

--------------------------------

### Adding Items to the Queue

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/interfaces/AsyncQueuedSignal

Examples of adding items to the queue with different configurations.

```typescript
queuer.addItem({ value: 'task', priority: 10 });
queuer.addItem('task2', 'front');
```

--------------------------------

### Pre-populate Queue with Initial Items

Source: https://tanstack.com/pacer/latest/docs/guides/queuing.md

Initialize the queue with a list of items and optionally start processing immediately by setting `started: true`.

```typescript
const queue = new Queuer<number>(
  (item) => {
    // Process each item
    console.log('Processing:', item)
  },
  {
    initialItems: [1, 2, 3],
    started: true // Start processing immediately
  }
)
```

--------------------------------

### Throttle Configuration Examples

Source: https://tanstack.com/pacer/latest/docs/reference/functions/throttle

Shows basic usage and configuration for leading and trailing execution behavior.

```typescript
// Basic throttling - max once per second
const throttled = throttle(updateUI, { wait: 1000 });

// Configure leading/trailing execution
const throttled = throttle(saveData, {
  wait: 2000,
  leading: true,  // Execute immediately on first call
  trailing: true  // Execute again after delay if called during wait
});
```

--------------------------------

### Install React Devtools Adapter

Source: https://tanstack.com/pacer/latest/docs/installation.md

Install the React devtools adapter and Pacer devtools plugin as dev dependencies.

```bash
npm install @tanstack/react-devtools @tanstack/react-pacer-devtools --save-dev
```

--------------------------------

### AsyncQueuer Class Usage

Source: https://tanstack.com/pacer/latest/docs/reference/classes/AsyncQueuer

Example demonstrating how to instantiate an AsyncQueuer and add items for processing.

```APIDOC
## AsyncQueuer

### Description
An asynchronous queue for processing tasks with configurable concurrency, priority, and expiration. It supports returning promises, retry logic, abort signals, and detailed execution tracking.

### Constructor
`new AsyncQueuer<TValue>(processor: (item: TValue) => Promise<any>, options?: AsyncQueuerOptions)`

### Methods
- **addItem(item: TValue)**: Adds an item to the queue for processing.
- **start()**: Starts processing the queue.

### Example
```typescript
const asyncQueuer = new AsyncQueuer<string>(async (item) => {
  return item.toUpperCase();
}, {
  concurrency: 2,
  onSuccess: (result) => {
    console.log(result);
  }
});

asyncQueuer.addItem('hello');
asyncQueuer.start();
```
```

--------------------------------

### addItem Usage Example

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/interfaces/QueuedSignal

Demonstrates adding items to the queue with optional positioning.

```typescript
queuer.addItem('task');
queuer.addItem('task2', 'front');
```

--------------------------------

### Implementing asyncRetry

Source: https://tanstack.com/pacer/latest/docs/reference/functions/asyncRetry

Example showing how to wrap an async function with retry logic using specific configuration options.

```ts
// Define your async function normally
async function fetchData(url: string) {
  const response = await fetch(url)
  if (!response.ok) throw new Error('Request failed')
  return response.json()
}

// Create retry-enabled function
const fetchWithRetry = asyncRetry(fetchData, {
  maxAttempts: 3,
  backoff: 'exponential',
  baseWait: 1000,
  jitter: 0.1
})

// Call it multiple times
const data1 = await fetchWithRetry('/api/data1')
const data2 = await fetchWithRetry('/api/data2')
```

--------------------------------

### Queuer Usage Examples

Source: https://tanstack.com/pacer/latest/docs/reference/classes/Queuer

Demonstrates both automatic processing with wait times and manual control over queue execution.

```typescript
// Auto-processing queue with wait time
const autoQueue = new Queuer<number>((n) => console.log(n), {
  started: true, // Begin processing immediately
  wait: 1000, // Wait 1s between items
  onExecute: (item, queuer) => console.log(`Processed ${item}`)
});
autoQueue.addItem(1); // Will process after 1s
autoQueue.addItem(2); // Will process 1s after first item

// Manual processing queue
const manualQueue = new Queuer<number>((n) => console.log(n), {
  started: false
});
manualQueue.addItem(1); // [1]
manualQueue.addItem(2); // [1, 2]
manualQueue.execute(); // logs 1, queue is [2]
manualQueue.getNextItem(); // returns 2, queue is empty
```

--------------------------------

### Usage patterns for createThrottler

Source: https://tanstack.com/pacer/latest/docs/framework/solid/reference/functions/createThrottler

Examples demonstrating default behavior, component-level subscriptions, and hook-level state tracking.

```tsx
// Default behavior - no reactive state subscriptions
const throttler = createThrottler(setValue, { wait: 1000 });

// Subscribe to state changes deep in component tree using Subscribe component
<throttler.Subscribe selector={(state) => ({ isPending: state.isPending })}>
  {(state) => (
    <div>{state().isPending ? 'Loading...' : 'Ready'}</div>
  )}
</throttler.Subscribe>

// Opt-in to track isPending changes at hook level (optimized for loading states)
const throttler = createThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to track executionCount changes (optimized for tracking execution)
const throttler = createThrottler(
  setValue,
  { wait: 1000 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - track when any of these change
const throttler = createThrottler(
  setValue,
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false  // Skip trailing edge updates
  },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    lastExecutionTime: state.lastExecutionTime,
    nextExecutionTime: state.nextExecutionTime
  })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, executionCount } = throttler.state();
```

--------------------------------

### Batching Analytics Events

Source: https://tanstack.com/pacer/latest/docs/framework/preact/reference/functions/useBatchedCallback

Example showing how to batch analytics events with a maximum size and wait time.

```tsx
// Batch analytics events
const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
  sendAnalytics(events);
}, {
  maxSize: 5,    // Process when 5 events collected
  wait: 2000     // Or after 2 seconds
});

// Use in event handlers
<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
  Click me
</button>
```

--------------------------------

### Async batcher usage examples

Source: https://tanstack.com/pacer/latest/docs/framework/preact/reference/functions/useAsyncBatcher

Demonstrates various patterns for initializing the batcher, subscribing to state, and manual execution.

```tsx
// Basic async batcher for API requests - no reactive state subscriptions
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 }
);

// Subscribe to state changes deep in component tree using Subscribe HOC
<asyncBatcher.Subscribe selector={(state) => ({ size: state.size })}>
  {({ size }) => (
    <div>Batch Size: {size}</div>
  )}
</asyncBatcher.Subscribe>

// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({
    isExecuting: state.isExecuting,
    isPending: state.isPending,
    status: state.status
  })
);

// Opt-in to re-render when results are available (optimized for data display)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount,
    totalItemsProcessed: state.totalItemsProcessed
  })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  {
    maxSize: 10,
    wait: 2000,
    onError: (error) => console.error('Batch processing failed:', error)
  },
  (state) => ({
    errorCount: state.errorCount,
    failedItems: state.failedItems,
    totalItemsFailed: state.totalItemsFailed
  })
);

// Complete example with all callbacks
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  {
    maxSize: 10,
    wait: 2000,
    onSuccess: (result) => {
      console.log('Batch processed successfully:', result);
    },
    onError: (error) => {
      console.error('Batch processing failed:', error);
    }
  }
);

// Add items to batch
asyncBatcher.addItem(newItem);

// Manually execute batch
const result = await asyncBatcher.execute();

// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult, size } = asyncBatcher.state;
```

--------------------------------

### Dynamically Configure Queuer Options

Source: https://tanstack.com/pacer/latest/docs/guides/queuing.md

Modify queue options like `wait` and `started` after creation using `setOptions()`. This example changes the processing speed and starts the queue.

```typescript
const queue = new Queuer<number>(
  (item) => {
    // Process each item
    console.log('Processing:', item)
  },
  {
    wait: 1000,
    started: false
  }
)

// Change configuration
queue.setOptions({
  wait: 500, // Process items twice as fast
  started: true // Start processing
})

// Access current state
console.log(queue.store.state.size) // Current queue size
console.log(queue.store.state.isRunning) // Whether queue is running
```

--------------------------------

### Usage Example

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/injectAsyncQueuedSignal

Demonstrates initializing the queuer, adding items, accessing the current queue state, and controlling queue execution.

```typescript
// Default behavior - track items
const queued = injectAsyncQueuedSignal(
  async (item) => {
    const response = await fetch('/api/process', {
      method: 'POST',
      body: JSON.stringify(item)
    });
    return response.json();
  },
  { concurrency: 2, wait: 1000 }
);

// Add items
queued.addItem(data1);

// Access items
console.log(queued()); // [data1, ...]

// Control the queue
queued.queuer.start();
queued.queuer.stop();
```

--------------------------------

### Configuring Pacer Options

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/providePacerOptions

Examples of how to provide Pacer options in both standalone application configurations and NgModule-based setups.

```typescript
// In your app.config.ts (standalone)
export const appConfig: ApplicationConfig = {
  providers: [
    providePacerOptions({
      debouncer: { wait: 300 },
      throttler: { wait: 100 },
    }),
  ],
};

// Or in NgModule (module-based)
@NgModule({
  providers: [
    providePacerOptions({
      debouncer: { wait: 300 },
    }),
  ],
})
export class AppModule {}
```

--------------------------------

### Initialize and Mount Application

Source: https://tanstack.com/pacer/latest/docs/framework/react/examples/useAsyncRateLimiter

Sets up the React root and wraps the application with PacerProvider, including logic for unmounting and cancellation.

```tsx
const root = ReactDOM.createRoot(document.getElementById('root')!)

let mounted = true
root.render(
  // optionally, provide default options to an optional PacerProvider
  <PacerProvider
  // defaultOptions={{
  //   rateLimiter: {
  //     limit: 5,
  //   },
  // }}
  >
    <App />
  </PacerProvider>,
)

// demo unmounting and cancellation
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    mounted = !mounted
    root.render(
      mounted ? (
        // optionally, provide default options to an optional PacerProvider
        <PacerProvider
        // defaultOptions={{
        //   rateLimiter: {
        //     limit: 5,
        //   },
        // }}
        >
          <App />
        </PacerProvider>
      ) : null,
    )
  }
})
```

--------------------------------

### Starting and Stopping Queuer Processing

Source: https://tanstack.com/pacer/latest/docs/guides/queuing.md

Manages the processing state of a Queuer instance using `start()` and `stop()`. Queues can be initialized in a paused state with `started: false`.

```typescript
const queue = new Queuer<number>(
  (item) => {
    // Process each item
    console.log('Processing:', item)
  },
  {
    started: false // Start paused
  }
)

queue.start() // Begin processing items
queue.stop()  // Pause processing

// Manually process items while the queue is stopped (run it your own way)
queue.getNextItem() // Get next item
queue.getNextItem() // Get next item
queue.getNextItem() // Get next item
```

--------------------------------

### Implement asyncBatch with configuration

Source: https://tanstack.com/pacer/latest/docs/reference/functions/asyncBatch

Example showing how to initialize an async batcher with custom processing logic, batch size limits, and lifecycle callbacks.

```typescript
const batchItems = asyncBatch<number>(
  async (items) => {
    const result = await processApiCall(items);
    console.log('Processing:', items);
    return result;
  },
  {
    maxSize: 3,
    wait: 1000,
    onSuccess: (result) => console.log('Batch succeeded:', result),
    onError: (error) => console.error('Batch failed:', error)
  }
);

batchItems(1);
batchItems(2);
batchItems(3); // Triggers batch processing
```

--------------------------------

### Creating and Using an Async Queue

Source: https://tanstack.com/pacer/latest/docs/reference/functions/asyncQueue

Example of initializing an async queue with concurrency and wait settings, and adding an item for processing.

```ts
const enqueue = asyncQueue<string>(async (item) => {
  return item.toUpperCase();
}, {
  concurrency: 2,
  wait: 100,
  onSuccess: (result) => console.log('Processed:', result)
});

enqueue('hello');
```

--------------------------------

### Configure started state

Source: https://tanstack.com/pacer/latest/docs/reference/interfaces/AsyncBatcherOptions

Determines if the batcher should start processing immediately.

```typescript
optional started: boolean;
```

```typescript
true
```

--------------------------------

### Install Angular Pacer Adapter

Source: https://tanstack.com/pacer/latest/docs/framework/angular/adapter

Command to install the Angular adapter package via npm.

```shell
npm install @tanstack/angular-pacer
```

--------------------------------

### Debounce Usage Example

Source: https://tanstack.com/pacer/latest/docs/reference/functions/debounce

Example showing how to create a debounced function that executes at most once per second.

```typescript
const debounced = debounce(() => {
  saveChanges();
}, { wait: 1000 });

// Called repeatedly but executes at most once per second
inputElement.addEventListener('input', debounced);
```

--------------------------------

### Implement async batching and state subscription

Source: https://tanstack.com/pacer/latest/docs/framework/react/reference/functions/useAsyncBatcher

Examples demonstrating basic batching, using the Subscribe HOC for deep tree updates, and optimizing re-renders with selectors.

```tsx
// Basic async batcher for API requests - no reactive state subscriptions
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 }
);

// Subscribe to state changes deep in component tree using Subscribe HOC
<asyncBatcher.Subscribe selector={(state) => ({ size: state.size, isExecuting: state.isExecuting })}>
  {({ size, isExecuting }) => (
    <div>Batch: {size} items, {isExecuting ? 'Processing' : 'Ready'}</div>
  )}
</asyncBatcher.Subscribe>

// Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({
    isExecuting: state.isExecuting,
    isPending: state.isPending,
    status: state.status
  })
);

// Opt-in to re-render when results are available (optimized for data display)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount,
    totalItemsProcessed: state.totalItemsProcessed
  })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  {
    maxSize: 10,
    wait: 2000,
    onError: (error) => console.error('Batch processing failed:', error)
  },
  (state) => ({
    errorCount: state.errorCount,
    failedItems: state.failedItems,
    totalItemsFailed: state.totalItemsFailed
  })
);

// Complete example with all callbacks
const asyncBatcher = useAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  {
    maxSize: 10,
    wait: 2000,
    onSuccess: (result) => {
      console.log('Batch processed successfully:', result);
    },
    onError: (error) => {
      console.error('Batch processing failed:', error);
    }
  }
);

// Add items to batch
asyncBatcher.addItem(newItem);

// Manually execute batch
const result = await asyncBatcher.execute();

// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult, size } = asyncBatcher.state;
```

--------------------------------

### Implement createAsyncRateLimiter in Solid

Source: https://tanstack.com/pacer/latest/docs/framework/solid/reference/functions/createAsyncRateLimiter

Demonstrates various ways to initialize the rate limiter, including default behavior, component-level subscriptions, and specific state tracking selectors.

```tsx
// Default behavior - no reactive state subscriptions
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data; // Return value is preserved
  },
  { limit: 5, window: 1000 } // 5 calls per second
);

// Subscribe to state changes deep in component tree using Subscribe component
<asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount, isExecuting: state.isExecuting })}>
  {(state) => (
    <div>Rejected: {state().rejectionCount}, {state().isExecuting ? 'Executing' : 'Idle'}</div>
  )}
</asyncRateLimiter.Subscribe>

// Opt-in to track execution state changes at hook level (optimized for loading indicators)
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 },
  (state) => ({ isExecuting: state.isExecuting })
);

// Opt-in to track results when available (optimized for data display)
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 },
  (state) => ({
    lastResult: state.lastResult,
    successCount: state.successCount
  })
);

// Opt-in to track error/rejection state changes (optimized for error handling)
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  {
    limit: 5,
    window: 1000,
    onError: (error) => console.error('API call failed:', error),
    onReject: (rateLimiter) => console.log('Rate limit exceeded')
  },
  (state) => ({
    errorCount: state.errorCount,
    rejectionCount: state.rejectionCount
  })
);

// Opt-in to track execution metrics changes (optimized for stats display)
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 },
  (state) => ({
    successCount: state.successCount,
    errorCount: state.errorCount,
    settleCount: state.settleCount,
    rejectionCount: state.rejectionCount
  })
);

// Opt-in to track execution times changes (optimized for window calculations)
const asyncRateLimiter = createAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 },
  (state) => ({ executionTimes: state.executionTimes })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult, rejectionCount } = asyncRateLimiter.state();
```

--------------------------------

### Start queue processing

Source: https://tanstack.com/pacer/latest/docs/reference/classes/AsyncQueuer

Starts processing items in the queue. If the queue is already running, this method does nothing.

```ts
start(): void;
```

--------------------------------

### Install Core Pacer Package

Source: https://tanstack.com/pacer/latest/docs/installation.md

Install the core TanStack Pacer package for use with vanilla JavaScript.

```bash
npm install @tanstack/pacer
```

--------------------------------

### Install TanStack Pacer React Adapter

Source: https://tanstack.com/pacer/latest/docs/framework/react/adapter.md

Install the React Adapter for TanStack Pacer using npm.

```sh
npm install @tanstack/react-pacer
```

--------------------------------

### Implement createAsyncDebouncer with various configurations

Source: https://tanstack.com/pacer/latest/docs/framework/solid/reference/functions/createAsyncDebouncer

Demonstrates default usage, state selection for loading indicators, and error handling configurations.

```tsx
// Default behavior - no reactive state subscriptions
const { maybeExecute } = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 }
);

// Opt-in to track isPending or isExecuting changes (optimized for loading states)
const debouncer = createAsyncDebouncer(
  async (query: string) => {
    const results = await api.search(query);
    return results;
  },
  { wait: 500 },
  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
);

// Opt-in to track error state changes (optimized for error handling)
const debouncer = createAsyncDebouncer(
  async (searchTerm) => {
    const data = await searchAPI(searchTerm);
    return data;
  },
  {
    wait: 300,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, isExecuting } = debouncer.state();
```

--------------------------------

### Install React Pacer Devtools

Source: https://tanstack.com/pacer/latest/docs/devtools.md

Install the necessary packages for React Pacer Devtools using npm.

```sh
npm install @tanstack/react-devtools @tanstack/react-pacer-devtools
```

--------------------------------

### Implement useBatcher patterns

Source: https://tanstack.com/pacer/latest/docs/framework/react/reference/functions/useBatcher

Examples demonstrating default behavior, state subscriptions, optimized re-renders, and manual batch control.

```tsx
// Default behavior - no reactive state subscriptions
const batcher = useBatcher<number>(
  (items) => console.log('Processing batch:', items),
  { maxSize: 5, wait: 2000 }
);

// Subscribe to state changes deep in component tree using Subscribe HOC
<batcher.Subscribe selector={(state) => ({ size: state.size, isPending: state.isPending })}>
  {({ size, isPending }) => (
    <div>Batch: {size} items, {isPending ? 'Pending' : 'Ready'}</div>
  )}
</batcher.Subscribe>

// Opt-in to re-render when batch size changes at hook level (optimized for displaying queue size)
const batcher = useBatcher<number>(
  (items) => console.log('Processing batch:', items),
  { maxSize: 5, wait: 2000 },
  (state) => ({
    size: state.size,
    isEmpty: state.isEmpty
  })
);

// Opt-in to re-render when execution metrics change (optimized for stats display)
const batcher = useBatcher<number>(
  (items) => console.log('Processing batch:', items),
  { maxSize: 5, wait: 2000 },
  (state) => ({
    executionCount: state.executionCount,
    totalItemsProcessed: state.totalItemsProcessed
  })
);

// Opt-in to re-render when processing state changes (optimized for loading indicators)
const batcher = useBatcher<number>(
  (items) => console.log('Processing batch:', items),
  { maxSize: 5, wait: 2000 },
  (state) => ({
    isPending: state.isPending,
    isRunning: state.isRunning,
    status: state.status
  })
);

// Example with custom state management and batching
const [items, setItems] = useState([]);

const batcher = useBatcher<number>(
  (items) => console.log('Processing batch:', items),
  {
    maxSize: 5,
    wait: 2000,
    onItemsChange: (batcher) => setItems(batcher.peekAllItems()),
    getShouldExecute: (items) => items.length >= 3
  }
);

// Add items to batch - they'll be processed when conditions are met
batcher.addItem(1);
batcher.addItem(2);
batcher.addItem(3); // Triggers batch processing

// Control the batcher
batcher.stop();  // Pause batching
batcher.start(); // Resume batching

// Access the selected state (will be empty object {} unless selector provided)
const { size, isPending } = batcher.state;
```

--------------------------------

### Basic Usage

Source: https://tanstack.com/pacer/latest/docs/framework/angular/reference/functions/injectBatcher

Demonstrates initializing a batcher with default behavior and adding items to the queue.

```typescript
// Default behavior - no reactive state subscriptions
const batcher = injectBatcher(
  (items) => console.log('Processing batch:', items),
  { maxSize: 5, wait: 2000 }
);

// Add items
batcher.addItem('task1');

// Access the selected state
const { items, isPending } = batcher.state();
```

--------------------------------

### Install Angular Pacer Adapter

Source: https://tanstack.com/pacer/latest/docs/installation.md

Install the Angular adapter for TanStack Pacer using npm, yarn, or pnpm.

```bash
npm install @tanstack/angular-pacer
```

--------------------------------

### Implement a basic queue with useQueuer

Source: https://tanstack.com/pacer/latest/docs/framework/react/examples/useQueuer

Demonstrates initializing a queue with initial items, a processing function, and manual control buttons for queue management.

```typescript
import { useState } from 'react'
import ReactDOM from 'react-dom/client'
import { useQueuer } from '@tanstack/react-pacer/queuer'
import { PacerProvider } from '@tanstack/react-pacer/provider'
import { pacerDevtoolsPlugin } from '@tanstack/react-pacer-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'

function App1() {
  // The function that we will be queuing
  function processItem(item: number) {
    console.log('processing item', item)
  }

  const queuer = useQueuer(
    processItem,
    {
      key: 'Add Number Queue',
      initialItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      maxSize: 25, // optional, defaults to Infinity
      started: false, // optional, defaults to true
      wait: 1000, // wait 1 second between processing items - wait is optional!
    },
    // Alternative to queuer.Subscribe: pass a selector as 3rd arg to cause re-renders and subscribe to state
    // (state) => state,
  )

  return (
    <div>
      <h1>TanStack Pacer useQueuer Example 1</h1>
      <queuer.Subscribe
        selector={(state) => ({
          size: state.size,
          isFull: state.isFull,
          isEmpty: state.isEmpty,
          isIdle: state.isIdle,
          isRunning: state.isRunning,
          status: state.status,
          executionCount: state.executionCount,
          items: state.items,
        })}
      >
        {({
          size,
          isFull,
          isEmpty,
          isIdle,
          isRunning,
          status,
          executionCount,
          items,
        }) => (
          <>
            <div>Queue Size: {size}</div>
            <div>Queue Max Size: {25}</div>
            <div>Queue Full: {isFull ? 'Yes' : 'No'}</div>
            <div>Queue Peek: {queuer.peekNextItem()}</div>
            <div>Queue Empty: {isEmpty ? 'Yes' : 'No'}</div>
            <div>Queue Idle: {isIdle ? 'Yes' : 'No'}</div>
            <div>Queuer Status: {status}</div>
            <div>Items Processed: {executionCount}</div>
            <div>Queue Items: {items.join(', ')}</div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(2, 1fr)',
                gap: '8px',
                maxWidth: '600px',
                margin: '16px 0',
              }}
            >
              <button
                onClick={() => {
                  const nextNumber = items.length
                    ? items[items.length - 1] + 1
                    : 1
                  queuer.addItem(nextNumber)
                }}
                disabled={isFull}
              >
                Add Number
              </button>
              <button
                disabled={isEmpty}
                onClick={() => {
                  const item = queuer.execute()
                  console.log('getNextItem item', item)
                }}
              >
                Process Next
              </button>
              <button onClick={() => queuer.clear()} disabled={isEmpty}>
                Clear Queue
              </button>
              <button onClick={() => queuer.reset()} disabled={isEmpty}>
                Reset Queue
              </button>
              <button onClick={() => queuer.start()} disabled={isRunning}>
                Start Processing
              </button>
              <button onClick={() => queuer.stop()} disabled={!isRunning}>
                Stop Processing
              </button>
              <button onClick={() => queuer.flush()} disabled={isEmpty}>
                Flush Queue
              </button>
            </div>
          </>
        )}
      </queuer.Subscribe>
      <queuer.Subscribe selector={(state) => state}>
        {(state) => (
          <pre style={{ marginTop: '20px' }}>
            {JSON.stringify(state, null, 2)}
          </pre>
        )}
      </queuer.Subscribe>
    </div>
  )
}
```

--------------------------------

### Usage examples for createQueuedSignal

Source: https://tanstack.com/pacer/latest/docs/framework/solid/reference/functions/createQueuedSignal

Demonstrates various configurations for queue processing, including default behavior, reactive state subscriptions, and manual queue control methods.

```tsx
// Default behavior - no reactive state subscriptions
const [items, addItem, queue] = createQueuedSignal(
  (item) => console.log('Processing:', item),
  {
    initialItems: ['item1', 'item2'],
    started: true,
    wait: 1000,
    getPriority: (item) => item.priority
  }
);

// Opt-in to track queue contents changes (optimized for displaying queue items)
const [items, addItem, queue] = createQueuedSignal(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    items: state.items,
    size: state.size,
    isEmpty: state.isEmpty
  })
);

// Opt-in to track processing state changes (optimized for loading indicators)
const [items, addItem, queue] = createQueuedSignal(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    isRunning: state.isRunning,
    isIdle: state.isIdle,
    status: state.status,
    pendingTick: state.pendingTick
  })
);

// Opt-in to track execution metrics changes (optimized for stats display)
const [items, addItem, queue] = createQueuedSignal(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({
    executionCount: state.executionCount,
    expirationCount: state.expirationCount,
    rejectionCount: state.rejectionCount
  })
);

// Add items to queue
const handleAdd = (item) => {
  addItem(item);
};

// Start automatic processing
const startProcessing = () => {
  queue.start();
};

// Stop automatic processing
const stopProcessing = () => {
  queue.stop();
};

// Manual processing still available
const handleProcess = () => {
  const nextItem = queue.getNextItem();
  if (nextItem) {
    processItem(nextItem);
  }
};

// Access the selected queuer state (will be empty object {} unless selector provided)
const { size, isRunning, executionCount } = queue.state;
```

--------------------------------

### useDebouncedValue usage examples

Source: https://tanstack.com/pacer/latest/docs/framework/preact/reference/functions/useDebouncedValue

Examples demonstrating default behavior and various opt-in reactive state subscriptions using selectors.

```tsx
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
  wait: 500 // Wait 500ms after last change
});

// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = useDebouncedValue(
  searchQuery,
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [debouncedQuery, debouncer] = useDebouncedValue(
  searchQuery,
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when debouncing status changes (optimized for status display)
const [debouncedQuery, debouncer] = useDebouncedValue(
  searchQuery,
  { wait: 500 },
  (state) => ({
    status: state.status,
    canLeadingExecute: state.canLeadingExecute
  })
);

// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
  fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);

// Handle input changes
const handleChange = (e) => {
  setSearchQuery(e.target.value);
};

// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.state;
```

--------------------------------

### Using useRateLimitedState with selectors and options

Source: https://tanstack.com/pacer/latest/docs/framework/preact/reference/functions/useRateLimitedState

Demonstrates default behavior, opt-in state tracking via selectors, rejection callbacks, and accessing rate limiter methods.

```tsx
// Default behavior - no reactive state subscriptions
const [value, setValue, rateLimiter] = useRateLimitedState(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
const [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { limit: 5, window: 60000, windowType: 'sliding' },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
const [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { limit: 5, window: 60000, windowType: 'sliding' },
  (state) => ({ rejectionCount: state.rejectionCount })
);

// Opt-in to re-render when execution times change (optimized for window calculations)
const [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { limit: 5, window: 60000, windowType: 'sliding' },
  (state) => ({ executionTimes: state.executionTimes })
);

// With rejection callback and fixed window
const [value, setValue] = useRateLimitedState(0, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
  }
});

// Access rateLimiter methods if needed
const handleSubmit = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    setValue(newValue);
  } else {
    showRateLimitWarning();
  }
};

// Access the selected rate limiter state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state;
```

--------------------------------

### Basic Debouncer Example

Source: https://tanstack.com/pacer/latest/docs/framework/react/adapter.md

A simple example of using the `useDebouncer` hook to delay the execution of a search function until the user stops typing.

```tsx
import { useDebouncer } from '@tanstack/react-pacer'

function SearchComponent() {
  const debouncer = useDebouncer(
    (query: string) => {
      console.log('Searching for:', query)
      // Perform search
    },
    { wait: 500 }
  )

  return (
    <input
      onChange={(e) => debouncer.maybeExecute(e.target.value)}
      placeholder="Search..."
    />
  )
}
```
Tokens:
Raw