javascript / intermediate
Snippet
Updates verzögern mit useDeferredValue
Der useDeferredValue-Hook ermöglicht es, das Re-Rendering eines nicht dringenden Teils der UI zu verzögern. Dadurch bleibt die Benutzeroberfläche für dringende Updates (wie das Tippen) reaktionsfähig, während schwerere Berechnungen auf einen freien Moment warten.
snippet.js
1
2
3
4
const [query, setQuery] = useState('');const deferredQuery = useDeferredValue(query);return <SearchResults query={deferredQuery} />;
react
Erklärung
1
const deferredQuery = useDeferredValue(query);
Gibt eine 'verzögerte' Version des Wertes zurück, die bei rechenintensiven Renders dem neuesten Stand hinterherhinkt.
2
return <SearchResults query={deferredQuery} />;
Die Komponente erhält den langsameren Wert, wodurch verhindert wird, dass der Hauptthread blockiert.