Funktion: useRateLimitedState()

function useRateLimitedState<TValue, TSelected>(
   value, 
   options, 
   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>]

function useRateLimitedState<TValue, TSelected>(
   value, 
   options, 
   selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactRateLimiter<Dispatch<SetStateAction<TValue>>, TSelected>]

Definiert in: react-pacer/src/rate-limiter/useRateLimitedState.ts:107

Ein React-Hook, der einen ratenbegrenzten Zustandswert erstellt, der eine harte Grenze für Zustandsaktualisierungen innerhalb eines Zeitfensters erzwingt. Dieser Hook kombiniert Reacts useState mit Ratenbegrenzungsfunktionalität, um kontrollierte Zustandsaktualisierungen bereitzustellen.

Ratenbegrenzung ist ein einfacher "Hartegrenze"-Ansatz – sie erlaubt alle Aktualisierungen, bis das Limit erreicht ist, und blockiert dann nachfolgende Aktualisierungen, bis das Fenster zurückgesetzt wird. Im Gegensatz zu Throttling oder Debouncing versucht sie nicht, Aktualisierungen zu verteilen oder intelligent zusammenzufassen. Dies kann zu Schüben schneller Aktualisierungen führen, gefolgt von Perioden ohne Aktualisierungen.

Der Ratenbegrenzer unterstützt zwei Arten von Fenstern

'fixed': Ein strenges Fenster, das nach der Fensterperiode zurückgesetzt wird. Alle Aktualisierungen innerhalb des Fensters zählen für das Limit, und das Fenster wird nach der Periode vollständig zurückgesetzt.
'sliding': Ein rollierendes Fenster, das Aktualisierungen zulässt, wenn alte ablaufen. Dies sorgt für eine konsistentere Rate von Aktualisierungen im Laufe der Zeit.

Für sanftere Aktualisierungsmuster sollten Sie in Betracht ziehen:

useThrottledState: Wenn Sie eine konsistente Abstandsregel zwischen Aktualisierungen wünschen (z. B. UI-Änderungen)
useDebouncedState: Wenn Sie schnelle Aktualisierungen zu einer einzigen Aktualisierung zusammenfassen möchten (z. B. Sucheingabe)

Ratenbegrenzung sollte hauptsächlich verwendet werden, wenn Sie strenge Limits erzwingen müssen, wie z. B. API-Ratenlimits.

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

Der ratenbegrenzte Zustandswert
Eine ratenbegrenzte Setter-Funktion, die die konfigurierten Limits einhält
Die rateLimiter-Instanz für zusätzliche Kontrolle

Für direktere Kontrolle über Ratenbegrenzung ohne Zustandsverwaltung sollten Sie stattdessen den untergeordneten useRateLimiter-Hook in Betracht ziehen.

Zustandsverwaltung und Selektor

Der Hook verwendet TanStack Store zur reaktiven Zustandsverwaltung über die zugrunde liegende ratenbegrenzte Instanz. Der selector-Parameter ermöglicht es Ihnen, anzugeben, welche Änderungen am ratenbegrenzten Zustand ein Neurendern auslösen, wodurch die Leistung optimiert wird, indem unnötige Neurendern 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 ratenbegrenzte 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

// Default behavior - no reactive state subscriptions
const [value, setValue, rateLimiter] = useRateLimitedState(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
const [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { 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 [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { limit: 5, window: 60000, windowType: 'sliding' },
  (state) => ({ rejectionCount: state.rejectionCount })
);

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

// With rejection callback and fixed window
const [value, setValue] = useRateLimitedState(0, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
  }
});

// Access rateLimiter methods if needed
const handleSubmit = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    setValue(newValue);
  } else {
    showRateLimitWarning();
  }
};

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

// Default behavior - no reactive state subscriptions
const [value, setValue, rateLimiter] = useRateLimitedState(0, {
  limit: 5,
  window: 60000,
  windowType: 'sliding'
});

// Opt-in to re-render when execution count changes (optimized for tracking successful updates)
const [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { 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 [value, setValue, rateLimiter] = useRateLimitedState(
  0,
  { limit: 5, window: 60000, windowType: 'sliding' },
  (state) => ({ rejectionCount: state.rejectionCount })
);

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

// With rejection callback and fixed window
const [value, setValue] = useRateLimitedState(0, {
  limit: 3,
  window: 5000,
  windowType: 'fixed',
  onReject: (rateLimiter) => {
    alert(`Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`);
  }
});

// Access rateLimiter methods if needed
const handleSubmit = () => {
  const remaining = rateLimiter.getRemainingInWindow();
  if (remaining > 0) {
    setValue(newValue);
  } else {
    showRateLimitWarning();
  }
};

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

useRateLimitedState

Funktion: useRateLimitedState()

Zustandsverwaltung und Selektor

Typparameter

Parameter

value

optionen

selector?

Gibt zurück

Beispiel

Bytes abonnieren

Bytes abonnieren