@tanstack/preact-pacer 0.0.1 → 0.19.0

package/src/async-queuer/useAsyncQueuer.ts

@@ -0,0 +1,249 @@
+import { useMemo, useState } from 'preact/hooks'
+import { AsyncQueuer } from '@tanstack/pacer/async-queuer'
+import { useStore } from '@tanstack/preact-store'
+import { useDefaultPacerOptions } from '../provider/PacerProvider'
+import type { Store } from '@tanstack/preact-store'
+import type {
+  AsyncQueuerOptions,
+  AsyncQueuerState,
+} from '@tanstack/pacer/async-queuer'
+import type { ComponentChildren } from 'preact'
+
+export interface PreactAsyncQueuer<TValue, TSelected = {}> extends Omit<
+  AsyncQueuer<TValue>,
+  'store'
+> {
+  /**
+   * A Preact HOC (Higher Order Component) that allows you to subscribe to the async queuer state.
+   *
+   * This is useful for opting into state re-renders for specific parts of the queuer state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <queuer.Subscribe selector={(state) => ({ size: state.size })}>
+   *   {({ size }) => (
+   *     <div>Queue Size: {size}</div>
+   *   )}
+   * </queuer.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: AsyncQueuerState<TValue>) => TSelected
+    children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+  }) => ComponentChildren
+  /**
+   * Reactive state that will be updated and re-rendered when the queuer state changes
+   *
+   * Use this instead of `queuer.store.state`
+   */
+  readonly state: Readonly<TSelected>
+  /**
+   * @deprecated Use `queuer.state` instead of `queuer.store.state` if you want to read reactive state.
+   * The state on the store object is not reactive, as it has not been wrapped in a `useStore` hook internally.
+   * Although, you can make the state reactive by using the `useStore` in your own usage.
+   */
+  readonly store: Store<Readonly<AsyncQueuerState<TValue>>>
+}
+
+/**
+ * A lower-level Preact hook that creates an `AsyncQueuer` instance for managing an async queue of items.
+ *
+ * Features:
+ * - Priority queue support via getPriority option
+ * - Configurable concurrency limit
+ * - Task success/error/completion callbacks
+ * - FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
+ * - Pause/resume task processing
+ * - Task cancellation
+ * - Item expiration to clear stale items from the queue
+ *
+ * Tasks are processed concurrently up to the configured concurrency limit. When a task completes,
+ * the next pending task is processed if below the concurrency limit.
+ *
+ * Error Handling:
+ * - If an `onError` handler is provided, it will be called with the error and queuer instance
+ * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+ * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+ * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+ * - The error state can be checked using the underlying AsyncQueuer instance
+ *
+ * ## State Management and Selector
+ *
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `queuer.Subscribe` HOC (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger a re-render
+ * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+ * state changes occur.
+ *
+ * **By default, there will be no reactive state subscriptions** and you must opt-in to state
+ * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+ * re-renders and gives you full control over when your component updates.
+ *
+ * Available state properties:
+ * - `activeItems`: Items currently being processed by the queuer
+ * - `errorCount`: Number of task executions that have resulted in errors
+ * - `expirationCount`: Number of items that have been removed due to expiration
+ * - `isEmpty`: Whether the queuer has no items to process
+ * - `isFull`: Whether the queuer has reached its maximum capacity
+ * - `isIdle`: Whether the queuer is not currently processing any items
+ * - `isRunning`: Whether the queuer is active and will process items automatically
+ * - `items`: Array of items currently waiting to be processed
+ * - `itemTimestamps`: Timestamps when items were added for expiration tracking
+ * - `lastResult`: The result from the most recent task execution
+ * - `pendingTick`: Whether the queuer has a pending timeout for processing the next item
+ * - `rejectionCount`: Number of items that have been rejected from being added
+ * - `settledCount`: Number of task executions that have completed (success or error)
+ * - `size`: Number of items currently in the queue
+ * - `status`: Current processing status ('idle' | 'running' | 'stopped')
+ * - `successCount`: Number of task executions that have completed successfully
+ *
+ * @example
+ * ```tsx
+ * // Default behavior - no reactive state subscriptions
+ * const asyncQueuer = useAsyncQueuer(
+ *   async (item) => {
+ *     const result = await processItem(item);
+ *     return result;
+ *   },
+ *   { concurrency: 2, maxSize: 100, started: false }
+ * );
+ *
+ * // Subscribe to state changes deep in component tree using Subscribe HOC
+ * <asyncQueuer.Subscribe selector={(state) => ({ size: state.size })}>
+ *   {({ size }) => (
+ *     <div>Queue Size: {size}</div>
+ *   )}
+ * </asyncQueuer.Subscribe>
+ *
+ * // Opt-in to re-render when queue size changes at hook level (optimized for displaying queue length)
+ * const asyncQueuer = useAsyncQueuer(
+ *   async (item) => {
+ *     const result = await processItem(item);
+ *     return result;
+ *   },
+ *   { concurrency: 2, maxSize: 100, started: false },
+ *   (state) => ({
+ *     size: state.size,
+ *     isEmpty: state.isEmpty,
+ *     isFull: state.isFull
+ *   })
+ * );
+ *
+ * // Opt-in to re-render when processing state changes (optimized for loading indicators)
+ * const asyncQueuer = useAsyncQueuer(
+ *   async (item) => {
+ *     const result = await processItem(item);
+ *     return result;
+ *   },
+ *   { concurrency: 2, maxSize: 100, started: false },
+ *   (state) => ({
+ *     isRunning: state.isRunning,
+ *     isIdle: state.isIdle,
+ *     status: state.status,
+ *     activeItems: state.activeItems,
+ *     pendingTick: state.pendingTick
+ *   })
+ * );
+ *
+ * // Opt-in to re-render when execution metrics change (optimized for stats display)
+ * const asyncQueuer = useAsyncQueuer(
+ *   async (item) => {
+ *     const result = await processItem(item);
+ *     return result;
+ *   },
+ *   { concurrency: 2, maxSize: 100, started: false },
+ *   (state) => ({
+ *     successCount: state.successCount,
+ *     errorCount: state.errorCount,
+ *     settledCount: state.settledCount,
+ *     expirationCount: state.expirationCount,
+ *     rejectionCount: state.rejectionCount
+ *   })
+ * );
+ *
+ * // Opt-in to re-render when results are available (optimized for data display)
+ * const asyncQueuer = useAsyncQueuer(
+ *   async (item) => {
+ *     const result = await processItem(item);
+ *     return result;
+ *   },
+ *   {
+ *     concurrency: 2,
+ *     maxSize: 100,
+ *     started: false,
+ *     onSuccess: (result) => {
+ *       console.log('Item processed:', result);
+ *     },
+ *     onError: (error) => {
+ *       console.error('Processing failed:', error);
+ *     }
+ *   },
+ *   (state) => ({
+ *     lastResult: state.lastResult,
+ *     successCount: state.successCount
+ *   })
+ * );
+ *
+ * // Add items to queue
+ * asyncQueuer.addItem(newItem);
+ *
+ * // Start processing
+ * asyncQueuer.start();
+ *
+ * // Access the selected state (will be empty object {} unless selector provided)
+ * const { size, isRunning, activeItems } = asyncQueuer.state;
+ * ```
+ */
+export function useAsyncQueuer<TValue, TSelected = {}>(
+  fn: (value: TValue) => Promise<any>,
+  options: AsyncQueuerOptions<TValue> = {},
+  selector: (state: AsyncQueuerState<TValue>) => TSelected = () =>
+    ({}) as TSelected,
+): PreactAsyncQueuer<TValue, TSelected> {
+  const mergedOptions = {
+    ...useDefaultPacerOptions().asyncQueuer,
+    ...options,
+  } as AsyncQueuerOptions<TValue>
+
+  const [asyncQueuer] = useState(() => {
+    const queuerInstance = new AsyncQueuer<TValue>(
+      fn,
+      mergedOptions,
+    ) as unknown as PreactAsyncQueuer<TValue, TSelected>
+
+    queuerInstance.Subscribe = function Subscribe<TSelected>(props: {
+      selector: (state: AsyncQueuerState<TValue>) => TSelected
+      children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+    }) {
+      const selected = useStore(queuerInstance.store, props.selector)
+
+      return typeof props.children === 'function'
+        ? props.children(selected)
+        : props.children
+    }
+
+    return queuerInstance
+  })
+
+  asyncQueuer.fn = fn
+  asyncQueuer.setOptions(mergedOptions)
+
+  const state = useStore(asyncQueuer.store, selector)
+
+  return useMemo(
+    () =>
+      ({
+        ...asyncQueuer,
+        state,
+      }) as PreactAsyncQueuer<TValue, TSelected>, // omit `store` in favor of `state`
+    [asyncQueuer, state],
+  )
+}

package/src/async-rate-limiter/index.ts

@@ -0,0 +1,5 @@
+// re-export everything from the core pacer package, BUT ONLY from the async-rate-limiter module
+export * from '@tanstack/pacer/async-rate-limiter'
+
+export * from './useAsyncRateLimiter'
+export * from './useAsyncRateLimitedCallback'

package/src/async-rate-limiter/useAsyncRateLimitedCallback.ts

@@ -0,0 +1,69 @@
+import { useCallback } from 'preact/hooks'
+import { useAsyncRateLimiter } from './useAsyncRateLimiter'
+import type { AnyAsyncFunction } from '@tanstack/pacer/types'
+import type { AsyncRateLimiterOptions } from '@tanstack/pacer/async-rate-limiter'
+
+/**
+ * A Preact hook that creates a rate-limited version of an async callback function.
+ * This hook is a convenient wrapper around the `useAsyncRateLimiter` hook,
+ * providing a stable, async rate-limited function reference for use in Preact components.
+ *
+ * Async rate limiting is a "hard limit" approach for async functions: it allows all calls
+ * until the limit is reached, then blocks (rejects) subsequent calls until the window resets.
+ * Unlike throttling or debouncing, it does not attempt to space out or collapse calls.
+ * This can lead to bursts of rapid executions followed by periods where all calls are blocked.
+ *
+ * The async rate limiter supports two types of windows:
+ * - 'fixed': A strict window that resets after the window period. All executions within the window count
+ *   towards the limit, and the window resets completely after the period.
+ * - 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+ *   consistent rate of execution over time.
+ *
+ * For smoother execution patterns, consider:
+ * - useAsyncThrottledCallback: When you want consistent spacing between executions (e.g. UI updates)
+ * - useAsyncDebouncedCallback: When you want to collapse rapid calls into a single execution (e.g. search input)
+ *
+ * Async rate limiting should primarily be used when you need to enforce strict limits
+ * on async operations, like API rate limits or other scenarios requiring hard caps
+ * on execution frequency.
+ *
+ * This hook provides a simpler API compared to `useAsyncRateLimiter`, making it ideal for basic
+ * async rate limiting needs. However, it does not expose the underlying AsyncRateLimiter instance.
+ *
+ * For advanced usage requiring features like:
+ * - Manual cancellation
+ * - Access to execution counts
+ * - Custom useCallback dependencies
+ *
+ * Consider using the `useAsyncRateLimiter` hook instead.
+ *
+ *
+ * @example
+ * ```tsx
+ * // Rate limit async API calls to maximum 5 calls per minute with a sliding window
+ * const makeApiCall = useAsyncRateLimitedCallback(
+ *   async (data: ApiData) => {
+ *     return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
+ *   },
+ *   {
+ *     limit: 5,
+ *     window: 60000, // 1 minute
+ *     windowType: 'sliding',
+ *     onReject: () => {
+ *       console.warn('API rate limit reached. Please wait before trying again.');
+ *     }
+ *   }
+ * );
+ * ```
+ */
+export function useAsyncRateLimitedCallback<TFn extends AnyAsyncFunction>(
+  fn: TFn,
+  options: AsyncRateLimiterOptions<TFn>,
+): (...args: Parameters<TFn>) => Promise<ReturnType<TFn>> {
+  const asyncRateLimitedFn = useAsyncRateLimiter(fn, options).maybeExecute
+  return useCallback(
+    (...args: Parameters<TFn>) =>
+      asyncRateLimitedFn(...args) as Promise<ReturnType<TFn>>,
+    [asyncRateLimitedFn],
+  )
+}

package/src/async-rate-limiter/useAsyncRateLimiter.ts

@@ -0,0 +1,261 @@
+import { useMemo, useState } from 'preact/hooks'
+import { AsyncRateLimiter } from '@tanstack/pacer/async-rate-limiter'
+import { useStore } from '@tanstack/preact-store'
+import { useDefaultPacerOptions } from '../provider/PacerProvider'
+import type { Store } from '@tanstack/preact-store'
+import type { AnyAsyncFunction } from '@tanstack/pacer/types'
+import type {
+  AsyncRateLimiterOptions,
+  AsyncRateLimiterState,
+} from '@tanstack/pacer/async-rate-limiter'
+import type { ComponentChildren } from 'preact'
+
+export interface PreactAsyncRateLimiter<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends Omit<AsyncRateLimiter<TFn>, 'store'> {
+  /**
+   * A Preact HOC (Higher Order Component) that allows you to subscribe to the async rate limiter state.
+   *
+   * This is useful for opting into state re-renders for specific parts of the rate limiter state
+   * deep in your component tree without needing to pass a selector to the hook.
+   *
+   * @example
+   * <rateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+   *   {({ rejectionCount }) => (
+   *     <div>Rejections: {rejectionCount}</div>
+   *   )}
+   * </rateLimiter.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: AsyncRateLimiterState<TFn>) => TSelected
+    children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+  }) => ComponentChildren
+  /**
+   * Reactive state that will be updated and re-rendered when the rate limiter state changes
+   *
+   * Use this instead of `rateLimiter.store.state`
+   */
+  readonly state: Readonly<TSelected>
+  /**
+   * @deprecated Use `rateLimiter.state` instead of `rateLimiter.store.state` if you want to read reactive state.
+   * The state on the store object is not reactive, as it has not been wrapped in a `useStore` hook internally.
+   * Although, you can make the state reactive by using the `useStore` in your own usage.
+   */
+  readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>
+}
+
+/**
+ * A low-level Preact hook that creates an `AsyncRateLimiter` instance to limit how many times an async function can execute within a time window.
+ *
+ * This hook is designed to be flexible and state-management agnostic - it simply returns a rate limiter instance that
+ * you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
+ *
+ * Rate limiting allows an async function to execute up to a specified limit within a time window,
+ * then blocks subsequent calls until the window passes. This is useful for respecting API rate limits,
+ * managing resource constraints, or controlling bursts of async operations.
+ *
+ * Unlike the non-async RateLimiter, this async version supports returning values from the rate-limited function,
+ * making it ideal for API calls and other async operations where you want the result of the `maybeExecute` call
+ * instead of setting the result on a state variable from within the rate-limited function.
+ *
+ * The rate limiter supports two types of windows:
+ * - 'fixed': A strict window that resets after the window period. All executions within the window count
+ *   towards the limit, and the window resets completely after the period.
+ * - 'sliding': A rolling window that allows executions as old ones expire. This provides a more
+ *   consistent rate of execution over time.
+ *
+ * Error Handling:
+ * - If an `onError` handler is provided, it will be called with the error and rate limiter instance
+ * - If `throwOnError` is true (default when no onError handler is provided), the error will be thrown
+ * - If `throwOnError` is false (default when onError handler is provided), the error will be swallowed
+ * - Both onError and throwOnError can be used together - the handler will be called before any error is thrown
+ * - The error state can be checked using the underlying AsyncRateLimiter instance
+ * - Rate limit rejections (when limit is exceeded) are handled separately from execution errors via the `onReject` handler
+ *
+ * ## State Management and Selector
+ *
+ * The hook uses TanStack Store for reactive state management. You can subscribe to state changes
+ * in two ways:
+ *
+ * **1. Using `rateLimiter.Subscribe` HOC (Recommended for component tree subscriptions)**
+ *
+ * Use the `Subscribe` HOC to subscribe to state changes deep in your component tree without
+ * needing to pass a selector to the hook. This is ideal when you want to subscribe to state
+ * in child components.
+ *
+ * **2. Using the `selector` parameter (For hook-level subscriptions)**
+ *
+ * The `selector` parameter allows you to specify which state changes will trigger a re-render
+ * at the hook level, optimizing performance by preventing unnecessary re-renders when irrelevant
+ * state changes occur.
+ *
+ * **By default, there will be no reactive state subscriptions** and you must opt-in to state
+ * tracking by providing a selector function or using the `Subscribe` HOC. This prevents unnecessary
+ * re-renders and gives you full control over when your component updates.
+ *
+ * Available state properties:
+ * - `errorCount`: Number of function executions that have resulted in errors
+ * - `executionTimes`: Array of timestamps when executions occurred for rate limiting calculations
+ * - `isExecuting`: Whether the rate-limited function is currently executing asynchronously
+ * - `lastResult`: The result from the most recent successful function execution
+ * - `rejectionCount`: Number of function executions that have been rejected due to rate limiting
+ * - `settleCount`: Number of function executions that have completed (success or error)
+ * - `successCount`: Number of function executions that have completed successfully
+ *
+ * @example
+ * ```tsx
+ * // Default behavior - no reactive state subscriptions
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   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 HOC
+ * <asyncRateLimiter.Subscribe selector={(state) => ({ rejectionCount: state.rejectionCount })}>
+ *   {({ rejectionCount }) => (
+ *     <div>Rejections: {rejectionCount}</div>
+ *   )}
+ * </asyncRateLimiter.Subscribe>
+ *
+ * // Opt-in to re-render when execution state changes at hook level (optimized for loading indicators)
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
+ *   },
+ *   { limit: 5, window: 1000 },
+ *   (state) => ({ isExecuting: state.isExecuting })
+ * );
+ *
+ * // Opt-in to re-render when results are available (optimized for data display)
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   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 re-render when error/rejection state changes (optimized for error handling)
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   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 re-render when execution metrics change (optimized for stats display)
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   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 re-render when execution times change (optimized for window calculations)
+ * const asyncRateLimiter = useAsyncRateLimiter(
+ *   async (id: string) => {
+ *     const data = await api.fetchData(id);
+ *     return data;
+ *   },
+ *   { limit: 5, window: 1000 },
+ *   (state) => ({ executionTimes: state.executionTimes })
+ * );
+ *
+ * // With state management and return value
+ * const [data, setData] = useState(null);
+ * const { maybeExecute, state } = useAsyncRateLimiter(
+ *   async (query) => {
+ *     const result = await searchAPI(query);
+ *     setData(result);
+ *     return result; // Return value can be used by the caller
+ *   },
+ *   {
+ *     limit: 10,
+ *     window: 60000, // 10 calls per minute
+ *     onReject: (rateLimiter) => {
+ *       console.log(`Rate limit exceeded. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
+ *     },
+ *     onError: (error) => {
+ *       console.error('API call failed:', error);
+ *     }
+ *   }
+ * );
+ *
+ * // Access the selected state (will be empty object {} unless selector provided)
+ * const { isExecuting, lastResult, rejectionCount } = state;
+ * ```
+ */
+export function useAsyncRateLimiter<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+>(
+  fn: TFn,
+  options: AsyncRateLimiterOptions<TFn>,
+  selector: (state: AsyncRateLimiterState<TFn>) => TSelected = () =>
+    ({}) as TSelected,
+): PreactAsyncRateLimiter<TFn, TSelected> {
+  const mergedOptions = {
+    ...useDefaultPacerOptions().asyncRateLimiter,
+    ...options,
+  } as AsyncRateLimiterOptions<TFn>
+
+  const [asyncRateLimiter] = useState(() => {
+    const rateLimiterInstance = new AsyncRateLimiter<TFn>(
+      fn,
+      mergedOptions,
+    ) as unknown as PreactAsyncRateLimiter<TFn, TSelected>
+
+    rateLimiterInstance.Subscribe = function Subscribe<TSelected>(props: {
+      selector: (state: AsyncRateLimiterState<TFn>) => TSelected
+      children: ((state: TSelected) => ComponentChildren) | ComponentChildren
+    }) {
+      const selected = useStore(rateLimiterInstance.store, props.selector)
+
+      return typeof props.children === 'function'
+        ? props.children(selected)
+        : props.children
+    }
+
+    return rateLimiterInstance
+  })
+
+  asyncRateLimiter.fn = fn
+  asyncRateLimiter.setOptions(mergedOptions)
+
+  const state = useStore(asyncRateLimiter.store, selector)
+
+  return useMemo(
+    () =>
+      ({
+        ...asyncRateLimiter,
+        state,
+      }) as PreactAsyncRateLimiter<TFn, TSelected>, // omit `store` in favor of `state`
+    [asyncRateLimiter, state],
+  )
+}

package/src/async-retryer/index.ts

@@ -0,0 +1,2 @@
+// re-export everything from the core pacer package, BUT ONLY from the async-retryer module
+export * from '@tanstack/pacer/async-retryer'

package/src/async-throttler/index.ts

@@ -0,0 +1,5 @@
+// re-export everything from the core pacer package, BUT ONLY from the async-throttler module
+export * from '@tanstack/pacer/async-throttler'
+
+export * from './useAsyncThrottler'
+export * from './useAsyncThrottledCallback'

package/src/async-throttler/useAsyncThrottledCallback.ts

@@ -0,0 +1,52 @@
+import { useCallback } from 'preact/hooks'
+import { useAsyncThrottler } from './useAsyncThrottler'
+import type { AsyncThrottlerOptions } from '@tanstack/pacer/async-throttler'
+import type { AnyAsyncFunction } from '@tanstack/pacer/types'
+
+/**
+ * A Preact hook that creates a throttled version of an async callback function.
+ * This hook is a convenient wrapper around the `useAsyncThrottler` hook,
+ * providing a stable, throttled async function reference for use in Preact components.
+ *
+ * The throttled async function will execute at most once within the specified wait time period,
+ * regardless of how many times it is called. If called multiple times during the wait period,
+ * only the first invocation will execute, and subsequent calls will be ignored until
+ * the wait period has elapsed. The returned function always returns a promise
+ * that resolves or rejects with the result of the original async function.
+ *
+ * This hook provides a simpler API compared to `useAsyncThrottler`, making it ideal for basic
+ * async throttling needs. However, it does not expose the underlying AsyncThrottler instance.
+ *
+ * For advanced usage requiring features like:
+ * - Manual cancellation
+ * - Access to execution/error state
+ * - Custom useCallback dependencies
+ *
+ * Consider using the `useAsyncThrottler` hook instead.
+ *
+ *
+ * @example
+ * ```tsx
+ * // Throttle an async API call
+ * const handleApiCall = useAsyncThrottledCallback(async (data) => {
+ *   const result = await sendDataToServer(data);
+ *   return result;
+ * }, {
+ *   wait: 200 // Execute at most once every 200ms
+ * });
+ *
+ * // Use in an event handler
+ * <button onClick={() => handleApiCall(formData)}>Send</button>
+ * ```
+ */
+export function useAsyncThrottledCallback<TFn extends AnyAsyncFunction>(
+  fn: TFn,
+  options: AsyncThrottlerOptions<TFn>,
+): (...args: Parameters<TFn>) => Promise<ReturnType<TFn>> {
+  const asyncThrottledFn = useAsyncThrottler(fn, options).maybeExecute
+  return useCallback(
+    (...args: Parameters<TFn>) =>
+      asyncThrottledFn(...args) as Promise<ReturnType<TFn>>,
+    [asyncThrottledFn],
+  )
+}