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

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

Definiert in: react-pacer/src/throttler/useThrottledCallback.ts:43

Ein React-Hook, der eine gedrosselte (throttled) Version einer Callback-Funktion erstellt. Dieser Hook ist im Wesentlichen ein Wrapper um die grundlegende Funktion throttle, die aus @tanstack/pacer exportiert wird, aber für React mit reaktiven Optionen und einer stabilen Funktionsreferenz optimiert ist.

Die gedrosselte Funktion wird höchstens einmal innerhalb der angegebenen Wartezeit ausgeführt, unabhängig davon, wie oft sie aufgerufen wird. Wenn sie während der Wartezeit mehrmals aufgerufen wird, wird nur der erste Aufruf ausgeführt, und nachfolgende Aufrufe werden ignoriert, bis die Wartezeit abgelaufen ist.

Dieser Hook bietet eine einfachere API im Vergleich zu useThrottler und ist daher ideal für grundlegende Drosselungsanforderungen. Er legt jedoch die zugrunde liegende Throttler-Instanz nicht offen.

Für fortgeschrittene Anwendungsfälle, die Funktionen wie

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

Erwägen Sie stattdessen die Verwendung des Hooks useThrottler.

• TFn extends AnyFunction

TFn

ThrottlerOptions<TFn>

Funktion

...Parameters<TFn>

void

// Throttle a window resize handler
const handleResize = useThrottledCallback(() => {
  updateLayoutMeasurements();
}, {
  wait: 100 // Execute at most once every 100ms
});

// Use in an event listener
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);

// Throttle a window resize handler
const handleResize = useThrottledCallback(() => {
  updateLayoutMeasurements();
}, {
  wait: 100 // Execute at most once every 100ms
});

// Use in an event listener
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);