import { useCallback } from 'react'
import { useAsyncThrottler } from './useAsyncThrottler'
import type { ReactAsyncThrottlerOptions } from './useAsyncThrottler'
import type { AnyAsyncFunction } from '@tanstack/pacer/types'
/**
* A React 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 React 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
*
* ```
*/
export function useAsyncThrottledCallback(
fn: TFn,
options: ReactAsyncThrottlerOptions,
): (...args: Parameters) => Promise> {
const asyncThrottledFn = useAsyncThrottler(fn, options).maybeExecute
return useCallback(
(...args) => asyncThrottledFn(...args) as Promise>,
[asyncThrottledFn],
)
}