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

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

Definiert in: react-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts:44

Ein React-Hook, der eine entprellte Version einer asynchronen Callback-Funktion erstellt. Dieser Hook ist ein praktischer Wrapper um den useAsyncDebouncer Hook und bietet eine stabile, entprellte Referenz auf eine asynchrone Funktion zur Verwendung in React-Komponenten.

Die entprellte asynchrone Funktion wird erst ausgeführt, nachdem die angegebene Wartezeit seit ihrer letzten Ausführung abgelaufen ist. Wenn sie erneut aufgerufen wird, bevor die Wartezeit abläuft, wird der Timer zurückgesetzt und beginnt erneut mit dem Warten. Die zurückgegebene Funktion gibt immer ein Promise zurück, das mit dem Ergebnis der ursprünglichen asynchronen Funktion aufgelöst oder abgelehnt wird.

Dieser Hook bietet eine einfachere API im Vergleich zu useAsyncDebouncer und ist daher ideal für grundlegende Bedürfnisse im Bereich des asynchronen Debouncing. Er gibt jedoch keine Instanz des zugrunde liegenden AsyncDebouncer frei.

Für fortgeschrittene Anwendungsfälle, die Funktionen wie

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

erfordern, sollten Sie stattdessen den Hook useAsyncDebouncer verwenden.

• TFn extends AnyAsyncFunction

TFn

AsyncDebouncerOptions<TFn>

Funktion

...Parameters<TFn>

Promise<ReturnType<TFn>>

// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
  const results = await fetchSearchResults(query);
  return results;
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="search"
  onChange={e => handleSearch(e.target.value)}
/>

// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
  const results = await fetchSearchResults(query);
  return results;
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="search"
  onChange={e => handleSearch(e.target.value)}
/>