React Hooks
V Techband je naším cieľom tvoriť IT základňu hviezdnych developerov a mimo iného podporovať ich a aj širšiu verejnosť, v osobnostnom a profesionálnom rozvoji v oblasti IT a technológií. Práve preto sme sa koncom roka 2020 rozhodli spustiť sériu Techband meetup-ov zameraných na rozvoj hard-skills, konkrétne na jednu z najpopulárnejších technológii – JavaScript.
V rámci týchto podujatí konajúcich sa na pravidelnej báze prinášame novinky týkajúce sa React.js, Node.js, Angular a pod. Vďaka spolupráci s inšpiratívnymi a skúsenými speakermi vieme účastníkom doručiť kvalitný prierez noviniek, tipov a informácií v danej problematike, kde si na svoje prídu nielen úplní začiatočníci, ale aj tí viac skúsenejší a seniornejší developeri.
V tomto článku vám preto prinášame bližšie predstavenie “React Hooks” v podaní Rada Šurláka, ktoré sme rozoberali na našom poslednom meetupe.
Čo to vlastne tie React Hooks sú?
React Hooks nie sú úplne horúcou novinkou, avšak stále patria medzi jednu z novších funkcionalít React-u.
Kedysi v začiatkoch React-u sa pracovalo s class-ovými komponentami, kde bolo vždy potrebné rozširovať nejakú class-u a na základe toho sa posúvať ďalej – React Hooks nám však dávajú možnosť používať túto „požičanú“ funkcionalitu a využívať tak React API v bežných funkciách. Teraz sa možno pýtate, na čo vám to je, keď s rovnakým účelom vieme využívať „požičané“ class-y. Vec sa má tak, že programátor nemusí vyslovene prejsť na používanie React Hooks alebo ich využívať na 100%, avšak pri každom modernejšom kóde v React-e je už teraz vysoká pravdepodobnosť, že práve Hooks tam využité budú.
Aké sú výhody používania React Hooks?
– pomáhajú nám zamedziť wrapper hell
– vďaka nim budeme mať o niečo menej boilerplate-u
– vieme si vytvoriť / zaobaliť nejakú funkcionalitu a potom ju používať v ďalších komponentoch, čiže v podstate vytvoriť svoj vlastný Hook (príkladom môže byť Hook na stiahnutie kontentu z API)
Aké React Hooks máme a čo presne robia?
UseState()
UseState je Hook, ktorý nám umožňuje mať stavové premenné vo funkčných komponentoch. Tejto funkcii odovzdáte počiatočný stav a ona vráti premennú s hodnotou aktuálneho stavu (nie nevyhnutne počiatočný stav) a ďalšiu funkciu na aktualizáciu tejto hodnoty.
Príkladom môže byť situácia, kedy chceme vytvoriť jednoduchú app-ku s counter-om – keď užívateľ stlačí tlačítko, tak sa counter zvýši o nejakú preddefinovanú hodnotu.
UseEffect()
Použitím tohto Hook-u poviete React-u, že váš komponent musí po zavolaní niečo urobiť. React si zapamätá funkciu, ktorú ste mu predali (budeme ju označovať ako „efekt“) a zavolá ju neskôr po vykonaní DOM aktualizácií.
Tento Hook je veľmi často využívaný. Príkladom jeho použitia môže byť napríklad situácia, keď chceme z API vytiahnuť to-do-čka a zobraziť ich používateľovi.
UseRef()
UseRef je vstavaný Hook, ktorý akceptuje jeden argument ako počiatočnú hodnotu a vráti odkaz na ňu (ref). Táto referencia (vrátená hodnota) je objekt so špeciálnou vlastnosťou .current.
Príkladnou situáciou pre využitie UseRef() môže byť potreba dostať sa / pristúpiť k nejakému DOM elementu a niečo s ním spraviť, napríklad v komponente.
UseReducer()
UseReducer je Hook, ktorý prijíma funkciu redukcie a počiatočný stav. Táto funkcia následne vracia pole s dvoma hodnotami. Prvou je hodnota stavu a druhou je pridelená funkcia, ktorá sa ďalej používa na spustenie príkazu pomocou deštrukturalizácie poľa.
Tento Hook používame vtedy, keď chceme riadiť nejaký komplexnejší stav. Jednoduchým príkladom využitia môže byť opäť counter, kde užívateľ pomocou tlačítok pridáva / odoberá určenú hodnotu.
UseMemo()
UseMemo je zabudovaným React Hook-om, ktorý nám umožňuje zapamätať si komplexnejšie funkcie a vyhnúť sa tak ich volaniu pri každom render-ovaní. V praxi jednoducho zadáte funkciu a pole vstupov, UseMemo následne prepočíta zapamätanú hodnotu jedine vtedy, keď sa jeden zo vstupov zmení.
UseMemo Hook zrýchľuje program tým, že zamedzuje zbytočnému volaniu funkcií. Situácie jeho využitia sú preto rôzne, ale primárne je určený pre zníženie zaťaženia systému a optimalizáciu komponentov.
UseCallback()
UseCallback sa používa vtedy, keď máte komponent, v ktorom sa child znova a znova zbytočne re-renderuje. Toto je užitočné najmä pri odovzdávaní spätných volaní optimalizovaným child komponentom, ktoré sa spoliehajú na referenčnú rovnosť, aby sa predišlo ich zbytočnému render-ovaniu.
Tento Hook sa využíva v rôznych situáciach, kedy si potrebujeme zamemorovať istú funkciu na zamedzenie zbytočného rerender-ovaniu child komponentov.
UseContext()
UseContext akceptuje hodnotu poskytnutú React-om. CreateContext potom znova vyrenderuje komponent vždy, keď sa zmení jeho hodnota – jeho výkon je možné optimalizovať pomocou memorizácie.
UseContext využívame v situáciach, kedy potrebujeme zabrániť prop drilling-u, konkrétnym príkladom je napríklad prípad, kedy chceme v rámci nejakej aplikácie prepínať svetlý a tmavý mód.
Pravidlá pri využívaní React Hooks
– React Hooks by mali byť využívané len navrchu komponentov
– Hook-y sa nevyužívajú v žiadnych podmienkach – to nefunguje, používajú sa len vo funkciách
V prípade, že si chcete React Hooks vyskúšať v praxi, tak môžete prijať Radovu „boss challenge“ na linku bit.ly/hooks-boss.
Sledujte naše aktivity aj na našom Instagram a Facebook profile alebo na LinkedIn.
