IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 25 - React Concurrent Mode - useTransition() a useDeferredValue()

V předchozí lekci, React Concurrent Mode - Základy, jsme si představili React Concurrent Mode a vysvětlili jsme si, v jakých situacích má své využití.

V dnešním tutoriálu pokročilého Reactu si představíme dva hooky, které jsou součástí React Concurrent Mode. Konkrétně to budou useTransition() a useDeferredValue(). Využijeme je k dokončení filtrace dat v aplikaci s pandou.

Hook useTransition()

Hook useTransition() je hook v Reactu, který nám pomáhá říct, které změny stavů nejsou urgentní, a nemusí se na ně proto čekat s vykreslením uživatelského rozhraní.

Hook v kódu definujeme následovně:

const [isPending, startTransition] = useTransition();

Vrací nám pole s dvěma hodnotami. Hodnota isPending je proměnná, která vrací true nebo false podle toho, jestli na pozadí právě probíhá nějaká asynchronní, triviální operace. Na základě této proměnné velice jednoduše na obrazovce vykreslíme, že se na pozadí stále ještě něco načítá.

Hodnota startTransition() je funkce, která slouží k označení operace, která není urgentní. Aktualizace UI se pak neváže na to, jestli tato operace již proběhla, nebo nikoliv.

V komponentě vypadá použití funkce následovně:


 

...konec náhledu článku...
Pokračuj dál

Znalosti v hodnotě stovek tisíc získáš za pár korun

Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.

Koupit tento kurz

Koupit všechny aktuálně dostupné lekce s funkcí odevzdávání úloh za pouhých 600 Kč
Aktuální stav konta 0 Kč
Koupí tohoto balíčku získáš přístup ke všem 30 článkům (30 lekcí) tohoto kurzu.

Před koupí tohoto článku je třeba koupit předchozí díl

Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.

Co od nás v dalších lekcích dostaneš?
  • Neomezený a trvalý přístup k jednotlivým lekcím.
  • Kvalitní znalosti v oblasti IT.
  • Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.

Popis článku

Požadovaný článek má následující obsah:

V tutoriálu pokročilého Reactu si představíme hooky useTransition() a useDeferredValue() jako prostředky ke zlepšení uživatelského zážitku v aplikaci.

Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.

Článek pro vás napsala Laura Baluchová
Avatar
Aktivity