Framework
Version
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference

useAsyncRateLimiter

Function: useAsyncRateLimiter()

ts
function useAsyncRateLimiter<TFn, TArgs>(fn, options): AsyncRateLimiter<TFn, TArgs>
function useAsyncRateLimiter<TFn, TArgs>(fn, options): AsyncRateLimiter<TFn, TArgs>

Defined in: async-rate-limiter/useAsyncRateLimiter.ts:43

A low-level React 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.

Type Parameters

TFn extends AnyAsyncFunction

TArgs extends any[]

Parameters

fn

TFn

options

AsyncRateLimiterOptions<TFn, TArgs>

Returns

AsyncRateLimiter<TFn, TArgs>

Example

tsx
// Basic API call rate limiting
const { maybeExecute } = useAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 } // 5 calls per second
);

// With state management
const [data, setData] = useState(null);
const { maybeExecute } = useAsyncRateLimiter(
  async (query) => {
    const result = await searchAPI(query);
    setData(result);
  },
  {
    limit: 10,
    window: 60000, // 10 calls per minute
    onReject: (info) => console.log(`Rate limit exceeded: ${info.nextValidTime - Date.now()}ms until next window`)
  }
);
// Basic API call rate limiting
const { maybeExecute } = useAsyncRateLimiter(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { limit: 5, window: 1000 } // 5 calls per second
);

// With state management
const [data, setData] = useState(null);
const { maybeExecute } = useAsyncRateLimiter(
  async (query) => {
    const result = await searchAPI(query);
    setData(result);
  },
  {
    limit: 10,
    window: 60000, // 10 calls per minute
    onReject: (info) => console.log(`Rate limit exceeded: ${info.nextValidTime - Date.now()}ms until next window`)
  }
);
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.