Ako efektívne využiť paralelizáciu a konkurenčnosť procesovZefektívnenie React aplikácií: Hooky useTransition a useDeferredValue v praxi

React 18 prináša model "concurrency", ktorý umožňuje efektívnejšie spracovávanie aktualizácií v aplikácii. Tento model rozdeľuje aktualizácie na prioritné (high-priority) a s menej prioritné (low-priority). Pre využitie concurrency je potrebné označiť aktualizácie ako low-priority pomocou startTransition alebo useDeferredValue.

Originálny článok nájdete na https://sinja.io, a dokumentáciu React.js, z ktorej sme čerpali informácie, možno nájsť vo verejne dostupných zdrojoch. Tieto materiály odporúčame všetkým, ktorí majú záujem o vývoj a programovanie React aplikácií a portálov.

Hook useTransition umožňuje spracovávať low-priority aktualizácie a monitorovať ich stav. Hook useDeferredValue je užitočný pre spracovanie stavu v kritických a náročných komponentoch, čo zlepšuje používateľský zážitok v aplikácii a celkové odozvy vašej stránky, ktorú programujete.

Concurrency alebo teda súbežnosť v React 18

Súbežnosť je model vykonávania, kde rôzne časti programu môžu byť vykonané mimo poradia bez ovplyvnenia výsledku. Tento model sa v JavaScripte v prehliadači nazýva kooperatívny multitasking, kde časti programu môžu byť pozastavené a neskôr pokračovať, napríklad pri čakaní na odpoveď zo servera​​.

Aktualizácie pred a po React 18

Pred React 18 boli všetky aktualizácie v Reacte synchronné, čo mohlo negatívne ovplyvňovať používateľskú skúsenosť pri zložitých aktualizáciách. React 18 predstavil dva typy aktualizácií: prioritné / urgentné (vysoká priorita) a menej prioritné / tranzitné (nízka priorita). Kvôli spätnej kompatibilite. sú v predvolenom nastavení všetky aktualizácie urgentné a nemožno ich prerušiť. Pre prechod na paralelné vykresľovanie je potrebné aktualizácie označiť ako nízkej priority pomocou startTransition alebo useDeferredValue​​.

Funkcia startTransition a hook useTransition

startTransition je základná funkcia na spustenie prechodu, ktorá umožňuje označiť aktualizácie stavu ako nízkej priority. Hook useTransition v React komponente poskytuje funkciu startTransition a booleovskú hodnotu, ktorá indikuje, či je aktualizácia nízkej priority v priebehu. Tento háčik umožňuje efektívnejšie riadiť aktualizácie a minimalizovať dopady na výkon aplikácie​​.

Hook useDeferredValue

useDeferredValue je užitočný, keď sa ten istý stav (state) používa v kritických a zložitých komponentoch. Tento hook umožňuje mať dve verzie toho istého stavu - jednu pre kritické komponenty (napr. vstupné polia, inputy, kde meškanie nie je prijateľné) a druhú pre komponenty, kde sú používatelia zvyknutí na dlhšie oneskorenia (napr. výsledky vyhľadávania)​​.

Pre viac informácií a prístup k originálnemu článku, z ktorého sme Vám priniesli výťažok, navštívte odkaz https://sinja.io/blog/guide-to-concurrency-in-react-18. Konkurentné spracovanie s prioritizáciou plánujeme využiť v najbližších dňoch v našich projektoch. Ideálnym kandidátom na uplatnenie týchto princípov je vyhľadávanie, ktoré spĺňa atribúty pre kritické a menej prioritné úlohy.