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

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

Definiert in: react-pacer/src/debouncer/useDebouncedCallback.ts:42

Ein React-Hook, der eine entprellte (debounced) Version einer Callback-Funktion erstellt. Dieser Hook ist im Wesentlichen eine Wrapper-Funktion um die Basis-debounce-Funktion, die von @tanstack/pacer exportiert wird, aber für React optimiert ist mit reaktiven Optionen und einer stabilen Funktionsreferenz.

Die entprellte Funktion wird erst ausgeführt, nachdem die angegebene Wartezeit seit ihrer letzten Aufrufung abgelaufen ist. Wenn sie vor Ablauf der Wartezeit erneut aufgerufen wird, wird der Timer zurückgesetzt und beginnt erneut mit dem Warten.

Dieser Hook bietet eine einfachere API im Vergleich zu useDebouncer und ist daher ideal für grundlegende Entprellungsanforderungen. Er gibt jedoch keine Instanz des zugrunde liegenden Debouncers preis.

Für fortgeschrittene Anwendungsfälle, die Funktionen wie

• Manuelle Abbrechung
• Zugriff auf Ausführungszähler
• Benutzerdefinierte useCallback-Abhängigkeiten

Ziehen Sie stattdessen die Verwendung des useDebouncer-Hooks in Betracht.

• TFn extends AnyFunction

TFn

DebouncerOptions<TFn>

Funktion

...Parameters<TFn>

void

// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
  fetchSearchResults(query);
}, {
  wait: 500 // Wait 500ms between executions
});

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

// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
  fetchSearchResults(query);
}, {
  wait: 500 // Wait 500ms between executions
});

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