Aus dem Kurs: React Grundkurs
Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.
useTransition – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
useTransition
Jetzt schauen wir uns an, wie wir trotz intensiven Berechnungen eine bessere Benutzungserfahrung erreichen können mit useTransition. Sie sehen hier eine Produktliste mit mehreren Millionen Datensätzen. Wenn wir ein Produkt anklicken, dann wird im console.log der entsprechende Produktname ausgegeben. Jedes Produkt wird zufällig generiert und hat eine ID, einen Namen und isHighlighted entweder true oder false, dabei ist jedes zweite Produkt mit isHighlighted true versehen. Das sind genau jene mit Regenbogen. Wir haben also highlighted Produkte und normale Produkte. Abhängig davon, welcher Button hier oben geklickt wurde, zeigen wir entweder alle Produkte oder nur jene mit Regenbogen. Das passiert über diesen State und wir filtern dann entsprechend die Produkte abhängig vom State. Damit der Browser jedoch nicht abstürzt, weil wir versuchen, mehrere Millionen Elemente zu rendern, erzeugen wir nur 1.500 tatsächliche HTML-Elemente von den tatsächlichen Datenknoten. Trotzdem müssen wir…