function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>

function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>

Definiert in: react-pacer/src/async-throttler/useAsyncThrottledCallback.ts:42

Ein React-Hook, der eine gedrosselte Version einer asynchronen Callback-Funktion erstellt. Dieser Hook ist ein praktischer Wrapper um den Hook useAsyncThrottler und stellt eine stabile, gedrosselte Referenz auf eine asynchrone Funktion für die Verwendung in React-Komponenten bereit.

Die gedrosselte asynchrone Funktion wird höchstens einmal innerhalb des angegebenen Wartezeitraums ausgeführt, unabhängig davon, wie oft sie aufgerufen wird. Wenn sie während des Wartezeitraums mehrmals aufgerufen wird, wird nur die erste Ausführung durchgeführt, und nachfolgende Aufrufe werden ignoriert, bis der Wartezeitraum abgelaufen ist. Die zurückgegebene Funktion gibt immer ein Promise zurück, das mit dem Ergebnis der ursprünglichen asynchronen Funktion aufgelöst oder zurückgewiesen wird.

Dieser Hook bietet eine einfachere API im Vergleich zu useAsyncThrottler und ist daher ideal für grundlegende asynchrone Drosselungsanforderungen. Er gibt jedoch keine Instanz des zugrunde liegenden AsyncThrottler preis.

Für fortgeschrittene Anwendungsfälle, die Funktionen wie

• Manuelle Abbrechung
• Zugriff auf Ausführungs-/Fehlerzustand
• Benutzerdefinierte useCallback-Abhängigkeiten

Ziehen Sie stattdessen die Verwendung des Hooks useAsyncThrottler in Betracht.

• TFn extends AnyAsyncFunction

TFn

AsyncThrottlerOptions<TFn>

Funktion

...Parameters<TFn>

Promise<ReturnType<TFn>>

// 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>

// 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>