Funktion: useRateLimiter()

function useRateLimiter<TFn, TSelected>(
   fn, 
   options, 
selector): ReactRateLimiter<TFn, TSelected>

function useRateLimiter<TFn, TSelected>(
   fn, 
   options, 
selector): ReactRateLimiter<TFn, TSelected>

Definiert in: react-pacer/src/rate-limiter/useRateLimiter.ts:141

Ein Low-Level-React-Hook, der eine RateLimiter-Instanz erstellt, um Ratenbegrenzungen für die Ausführung von Funktionen durchzusetzen.

Dieser Hook ist darauf ausgelegt, flexibel und zustandsverwaltungsunabhängig zu sein – er gibt einfach eine RateLimiter-Instanz zurück, die Sie mit jeder Zustandsverwaltungslösung integrieren können (useState, Redux, Zustand, Jotai usw.).

Ratenbegrenzung ist ein einfacher "Hard Limit"-Ansatz, der Ausführungen zulässt, bis innerhalb eines Zeitfensters eine maximale Anzahl erreicht ist, und dann alle nachfolgenden Aufrufe blockiert, bis das Fenster zurückgesetzt wird. Im Gegensatz zu Throttling oder Debouncing versucht es nicht, Ausführungen intelligent zu verteilen oder zusammenzuführen.

Der Ratenbegrenzer unterstützt zwei Arten von Fenstern

'fixed': Ein striktes Fenster, das nach Ablauf des Zeitfensters zurückgesetzt wird. Alle Ausführungen innerhalb des Fensters zählen für das Limit, und das Fenster wird nach Ablauf der Periode vollständig zurückgesetzt.
'sliding': Ein rollierendes Fenster, das Ausführungen ermöglicht, sobald ältere abgelaufen sind. Dies sorgt für eine konsistentere Ausführungsrate im Laufe der Zeit.

Für sanftere Ausführungsmuster

Verwenden Sie Throttling, wenn Sie eine konsistente Verteilung zwischen Ausführungen wünschen (z. B. UI-Updates)
Verwenden Sie Debouncing, wenn Sie schnell aufeinanderfolgende Ereignisse zusammenführen möchten (z. B. Such-Input)
Verwenden Sie Ratenbegrenzung nur, wenn Sie harte Limits durchsetzen müssen (z. B. API-Ratenlimits)

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store für reaktives Zustandsmanagement. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige erneute Renderings verhindert werden, wenn irrelevante Zustandsänderungen auftreten.

Standardmäßig erfolgen keine reaktiven Zustands-Subscriptions und Sie müssen das Zustands-Tracking durch Bereitstellen einer Selector-Funktion aktivieren. Dies verhindert unnötige Renderings und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente aktualisiert wird. Nur wenn Sie einen Selector bereitstellen, wird die Komponente neu gerendert, wenn sich die ausgewählten Zustandswerte ändern.

Verfügbare Zustandseigenschaften

executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
executionTimes: Array von Zeitstempeln, wann Ausführungen für Ratenbegrenzungsberechnungen stattfanden
rejectionCount: Anzahl der Funktionsausführungen, die aufgrund von Ratenbegrenzung abgelehnt wurden

Der Hook gibt ein Objekt zurück, das enthält

maybeExecute: Die ratenbegrenzte Funktion, die die konfigurierten Limits beachtet
getExecutionCount: Gibt die Anzahl der erfolgreichen Ausführungen zurück
getRejectionCount: Gibt die Anzahl der aufgrund von Ratenbegrenzungen abgelehnten Ausführungen zurück
getRemainingInWindow: Gibt zurück, wie viele weitere Ausführungen im aktuellen Fenster zulässig sind
reset: Setzt die Ausführungszähler und die Fensterzeit zurück

// Default behavior - no reactive state subscriptions
const rateLimiter = useRateLimiter(apiCall, {
  limit: 5,
  window: 60000,
  windowType: 'sliding',
});

// Opt-in to re-render when execution count changes (optimized for tracking successful executions)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ rejectionCount: state.rejectionCount })
);

// Opt-in to re-render when execution times change (optimized for window calculations)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ executionTimes: state.executionTimes })
);

// Multiple state properties - re-render when any of these change
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({
    executionCount: state.executionCount,
    rejectionCount: state.rejectionCount
  })
);

// Monitor rate limit status
const handleClick = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    rateLimiter.maybeExecute(data);
  } else {
    showRateLimitWarning();
  }
};

// Access the selected state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state;

// Default behavior - no reactive state subscriptions
const rateLimiter = useRateLimiter(apiCall, {
  limit: 5,
  window: 60000,
  windowType: 'sliding',
});

// Opt-in to re-render when execution count changes (optimized for tracking successful executions)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ executionCount: state.executionCount })
);

// Opt-in to re-render when rejection count changes (optimized for tracking rate limit violations)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ rejectionCount: state.rejectionCount })
);

// Opt-in to re-render when execution times change (optimized for window calculations)
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({ executionTimes: state.executionTimes })
);

// Multiple state properties - re-render when any of these change
const rateLimiter = useRateLimiter(
  apiCall,
  {
    limit: 5,
    window: 60000,
    windowType: 'sliding',
  },
  (state) => ({
    executionCount: state.executionCount,
    rejectionCount: state.rejectionCount
  })
);

// Monitor rate limit status
const handleClick = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    rateLimiter.maybeExecute(data);
  } else {
    showRateLimitWarning();
  }
};

// Access the selected state (will be empty object {} unless selector provided)
const { executionCount, rejectionCount } = rateLimiter.state;

useRateLimiter

Funktion: useRateLimiter()

Zustandsverwaltung und Selektor

Typparameter

Parameter

fn

optionen

selector

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren