useThrottledValue
Funktion: useThrottledValue()
function useThrottledValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
function useThrottledValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
Definiert in: react-pacer/src/throttler/useThrottledValue.ts:85
Ein High-Level React-Hook, der eine gedrosselte Version eines Wertes erstellt, die sich höchstens einmal innerhalb eines angegebenen Zeitfensters aktualisiert. Dieser Hook verwendet intern Reacts useState, um den gedrosselten Zustand zu verwalten.
Drosselung stellt sicher, dass die Wertaktualisierungen mit einer kontrollierten Rate erfolgen, unabhängig davon, wie häufig sich der Eingabewert ändert. Dies ist nützlich, um teure Neu-Renderings oder API-Aufrufe zu ratenbeschränken, die von sich schnell ändernden Werten abhängen.
Der Hook gibt ein Tupel zurück, das enthält
- Der gedrosselte Wert, der sich gemäß dem in den Optionen angegebenen Verhalten der führenden/nachlaufenden Kante aktualisiert
- Die Throttler-Instanz mit Steuerungsfunktionen
Für direktere Kontrolle über das Drosselungsverhalten ohne React-Zustandsverwaltung sollten Sie stattdessen den Low-Level-Hook useThrottler in Betracht ziehen.
Zustandsverwaltung und Selektor
Der Hook verwendet TanStack Store für reaktive Zustandsverwaltung über die zugrunde liegende Throttler-Instanz. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Throttler-Zustandsänderungen ein Neu-Rendering auslösen, was die Leistung optimiert, indem unnötige Neu-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 Throttler-Zustandseigenschaften
- executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
- lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
- lastExecutionTime: Zeitstempel der letzten Funktionsausführung in Millisekunden
- nextExecutionTime: Zeitstempel, wann die nächste Ausführung erfolgen kann, in Millisekunden
- isPending: Ob der Throttler auf den Timeout wartet, um die Ausführung auszulösen
- status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')
Typparameter
• TValue
• TSelected = ThrottlerState<Dispatch<SetStateAction<TValue>>>
Parameter
value
TValue
optionen
ThrottlerOptions<Dispatch<SetStateAction<TValue>>>
selector?
(state) => TSelected
Gibt zurück
[TValue, ReactThrottler<Dispatch<SetStateAction<TValue>>, TSelected>]
Beispiel
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access the selected throttler state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
// Default behavior - no reactive state subscriptions
const [throttledValue, throttler] = useThrottledValue(rawValue, { wait: 1000 });
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when throttling state changes (optimized for loading indicators)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when timing information changes (optimized for timing displays)
const [throttledValue, throttler] = useThrottledValue(
rawValue,
{ wait: 1000 },
(state) => ({
lastExecutionTime: state.lastExecutionTime,
nextExecutionTime: state.nextExecutionTime
})
);
// With custom leading/trailing behavior
const [throttledValue, throttler] = useThrottledValue(rawValue, {
wait: 1000,
leading: true, // Update immediately on first change
trailing: false // Skip trailing edge updates
});
// Access the selected throttler state (will be empty object {} unless selector provided)
const { executionCount, isPending } = throttler.state;
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.