javascript / intermediate
Snippet
Implementierung einer verzögerten Suche (Debouncing)
Debouncing verzögert die Ausführung einer Funktion, bis eine bestimmte Zeit seit dem letzten Auslöser vergangen ist, wodurch unnötige API-Aufrufe reduziert werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
const [searchTerm, setSearchTerm] = useState('');const [debouncedTerm, setDebouncedTerm] = useState('');useEffect(() => {const timer = setTimeout(() => {setDebouncedTerm(searchTerm);}, 500);return () => clearTimeout(timer);}, [searchTerm]);
react
Erklärung
1
const timer = setTimeout(...)
Setzt eine Verzögerung, bevor der endgültige Suchbegriff aktualisiert wird.
2
return () => clearTimeout(timer)
Bricht den vorherigen Timer ab, wenn der Benutzer vor Ablauf der Zeit erneut tippt.
3
[searchTerm]
Die Abhängigkeit stellt sicher, dass der Timer bei jedem Tastendruck neu startet.