useDebouncedValue
Funktion: useDebouncedValue()
function useDebouncedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
function useDebouncedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
Definiert in: react-pacer/src/debouncer/useDebouncedValue.ts:90
Ein React-Hook, der einen debounced Wert erstellt, der sich nur nach einer angegebenen Verzögerung aktualisiert. Im Gegensatz zu useDebouncedState verfolgt dieser Hook automatisch Änderungen am Eingabewert und aktualisiert den debounced Wert entsprechend.
Der debounced Wert wird erst aktualisiert, nachdem die angegebene Wartezeit seit der letzten Änderung des Eingabewerts verstrichen ist. Wenn sich der Eingabewert erneut ändert, bevor die Wartezeit abläuft, wird der Timer zurückgesetzt und beginnt erneut zu warten.
Dies ist nützlich, um debounced Werte aus häufig wechselnden Props oder Zuständen abzuleiten, wie z. B. Suchanfragen oder Formulareingaben, bei denen Sie die Häufigkeit von nachgelagerten Effekten oder Berechnungen begrenzen möchten.
Der Hook gibt den aktuellen debounced Wert und die zugrunde liegende Debouncer-Instanz zurück. Die Debouncer-Instanz kann verwendet werden, um auf zusätzliche Funktionalitäten wie Abbruch und Ausführungszählungen zuzugreifen.
Zustandsverwaltung und Selektor
Der Hook verwendet TanStack Store für reaktives Zustandsmanagement über die zugrunde liegende Debouncer-Instanz. Der Parameter selector ermöglicht es Ihnen, anzugeben, welche Änderungen am Debouncer-Zustand 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 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, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
Beispiel
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(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 [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(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.