useDebouncedState
Funktion: useDebouncedState()
function useDebouncedState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
function useDebouncedState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
Definiert in: react-pacer/src/debouncer/useDebouncedState.ts:81
Ein React-Hook, der einen entprellten Zustands-Wert erstellt und useState von React mit Entprellfunktionalität kombiniert. Dieser Hook bietet sowohl den aktuellen entprellten Wert als auch Methoden zu dessen Aktualisierung.
Der Zustands-Wert wird erst aktualisiert, nachdem die angegebene Wartezeit seit dem letzten Aktualisierungsversuch verstrichen ist. Wenn vor Ablauf der Wartezeit ein weiterer Aktualisierungsversuch unternommen wird, wird der Timer zurückgesetzt und beginnt erneut zu warten. Dies ist nützlich für die Handhabung häufiger Zustandsaktualisierungen, die gedrosselt werden sollen, wie z. B. Such-Eingabewerte oder Fenstergrößen.
Der Hook gibt ein Tupel zurück, das enthält
- Der aktuelle entprellte Wert
- Eine Funktion zum Aktualisieren des entprellten Werts
- Die Entpreller-Instanz mit zusätzlichen Steuerungs-Methoden
Zustandsverwaltung und Selektor
Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrunde liegende Entpreller-Instanz. Der selector-Parameter ermöglicht es Ihnen anzugeben, welche Entpreller-Zustandsänderungen ein Neu-Rendern auslösen, wodurch die Leistung optimiert wird, 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 Entpreller-Zustandseigenschaften
- canLeadingExecute: Ob der Debouncer an der führenden Kante ausführen kann
- executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
- isPending: Ob der Debouncer auf den Timeout wartet, um die Ausführung auszulösen
- lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
- status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending')
Typparameter
• TValue
• TSelected = DebouncerState<Dispatch<SetStateAction<TValue>>>
Parameter
value
TValue
optionen
DebouncerOptions<Dispatch<SetStateAction<TValue>>>
selector?
(state) => TSelected
Gibt zurück
[TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
Beispiel
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.state;
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.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.