25. diel - React Concurrent Mode - useTransition() a useDeferredValue()
V predchádzajúcej lekcii, React Concurrent Mode - Základy , sme si predstavili React Concurrent Mode a vysvetlili sme si, v akých situáciách má svoje využitie.
V dnešnom tutoriále pokročilého Reactu si predstavíme
dva hooky, ktoré sú súčasťou React Concurrent Mode. Konkrétne to budú
useTransition() a useDeferredValue(). Využijeme ich
na dokončenie filtrácie dát v aplikácii s pandou.
Hook useTransition()
Hook useTransition() je hook v React, ktorý nám pomáha
povedať, ktoré zmeny stavov nie sú urgentné a nemusia sa na
ne čakať s vykreslením užívateľského rozhrania.
Hook v kóde definujeme nasledovne:
Vracia nám pole s dvoma
hodnotami. Hodnota isPending je premenná, ktorá vracia
true alebo false podľa toho, či na pozadí práve
prebieha nejaká asynchrónna, triviálna operácia. Na základe tejto premennej
veľmi jednoducho na obrazovke vykreslíme, že sa na pozadí stále ešte
niečo načíta.
Hodnota startTransition() je funkcia, ktorá slúži na
označenie operácie, ktorá nie je urgentná. Aktualizácia UI
sa potom neviaže na to, či táto operácia už prebehla alebo nie.
V komponente vyzerá použitie funkcie nasledovne:
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Kúpiť tento kurz
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.
- Neobmedzený a trvalý prístup k jednotlivým lekciím.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále pokročilého Reactu si predstavíme hooky useTransition() a useDeferredValue() ako prostriedky na zlepšenie užívateľského zážitku v aplikácii.
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
