function useAsyncBatchedCallback<TFn>(fn, options): (...args) => Promise<void>

function useAsyncBatchedCallback<TFn>(fn, options): (...args) => Promise<void>

Definiert in: react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:43

Ein React-Hook, der eine gebündelte Version einer asynchronen Callback-Funktion erstellt. Dieser Hook ist eine praktische Hülle um den Hook useAsyncBatcher und stellt eine stabile, gebündelte asynchrone Funktionsreferenz für die Verwendung in React-Komponenten bereit.

Die gebündelte asynchrone Funktion sammelt einzelne Aufrufe zu Batches und führt sie aus, wenn die Batch-Bedingungen erfüllt sind (maximale Größe erreicht, Wartezeit abgelaufen oder benutzerdefinierte Logik). Die zurückgegebene Funktion gibt immer ein Promise zurück, das mit undefined aufgelöst wird (da die Batch-Funktion mehrere Elemente zusammen verarbeitet).

Dieser Hook bietet eine einfachere API im Vergleich zu useAsyncBatcher und ist somit ideal für grundlegende asynchrone Bündelungsanforderungen. Er macht jedoch keine Instanz des zugrunde liegenden AsyncBatcher zugänglich.

Für fortgeschrittene Anwendungsfälle, die Funktionen wie

• Manuelle Batch-Ausführung
• Zugriff auf Batch-Ergebnisse und -Status
• Benutzerdefinierte useCallback-Abhängigkeiten

Erwägen Sie die Verwendung des Hooks useAsyncBatcher stattdessen.

• TFn extends AnyAsyncFunction

(items) => Promise<any>

AsyncBatcherOptions<Parameters<TFn>[0]>

Funktion

...Parameters<TFn>

Promise<void>

// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
  const results = await Promise.all(requests.map(req => fetch(req.url)));
  return results.map(res => res.json());
}, {
  maxSize: 10,   // Process when 10 requests collected
  wait: 1000     // Or after 1 second
});

// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
  Track Event
</button>

// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
  const results = await Promise.all(requests.map(req => fetch(req.url)));
  return results.map(res => res.json());
}, {
  maxSize: 10,   // Process when 10 requests collected
  wait: 1000     // Or after 1 second
});

// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
  Track Event
</button>