5. diel - Hooky v React - useState(), useEffect() a useRef()

V predchádzajúcej lekcii, Serverové renderovanie s Next.js , sme sa zaoberali frameworkom Next.js a serverovým renderovaním.

V dnešnom tutoriále pokročilého Reactu sa bližšie zoznámime hooky a na praktickom príklade si ukážeme, ako s nimi pracovať. Zameriame sa na použitie hookov useState(), useEffect() a useRef().

Čo to sú hooky

Hooky sú funkcie, ktoré poskytuje React ako súčasť jeho API a umožňujú funkčným komponentom manipulovať s funkcionalitami, ktoré boli predtým dostupné iba pre triedové komponenty. Hooky boli predstavené v React od verzie 16.8 a znamenali veľkú zmenu v spôsobe písania komponentov.

S hooky môžeme do funkčných komponentov pridávať rôzne funkcionality a správanie. Napríklad useState() slúži na ukladanie stavu, useEffect() na prácu s efektmi a useRef() na vytváranie referencií na DOM prvky alebo iné hodnoty v komponente.

Pre prácu s hookmi existuje niekoľko pravidiel. Hooky musia byť volané iba na najvyššej úrovni funkčné komponenty alebo v iných vlastných hook funkciách. Hooky naopak nemôžu byť volané v rámci podmienok, slučiek alebo vnorených funkcií. Nemôžu byť volané ani v rámci triedových komponentov. V tých je správnym spôsobom používať metódy ako componentDidMount() alebo componentDidUpdate().

Hook useState()

Táto funkcia umožňuje komponentom ukladať a aktualizovať svoj vnútorný stav. Stav je zachovaný medzi re-render komponenty, čo umožňuje uchovávať dáta a interagovať s nimi v priebehu života komponenty.

Inicializácia stavu využíva deštrukturalizáciu poľa hodnôt, ktoré funkcia useState() vracia. Vyzerá takto:

• StateVariable je premenná, do ktorej je uložená aktuálna hodnota stavu. Pri prvom renderovaní je to hodnota zadaná ako východiskový stav v zátvorke useState(), v našom príklade 0.
• setStateVariable() je funkcia, ktorú použijeme na aktualizáciu stavu. Názov funkcie môže byť ľubovoľný, ale konvencia je používať slovo set nasledované názvom stavu.

Dôležitým poznatkom je to, že volanie funkcie pre zmenu stavu nezmení súčasný stav v kóde, ktorý je práve vykonávaný. Ovplyvní iba to, čo funkcia useState() vráti ako premennú od nasledujúceho renderovania:

Funkcie ako východiskový stav

Ako inicializačný stav pre useState() je možné použiť aj funkciu. To je užitočné v situácii, keď je počiatočný stav komponentu závislý od výpočtov alebo externého správania. Funkcia na inicializáciu stavu sa spustí iba raz, keď sa komponent prvýkrát vykreslí. Funkcia musí byť čistá (pure), nemala by prijímať žiadne argumenty a mala by vracať hodnotu ľubovoľného typu:

Aktualizácia stavu závislého na predchádzajúcom stave

Pre aktualizáciu stavu v Reactu, keď nová hodnota závisí od predchádzajúceho stavu, je dôležité zaistiť, že aktualizácia bude vykonávaná atomicky a spoľahlivo. To dosiahneme pomocou funkcie, ktorá akceptuje predchádzajúci stav ako argument:

Hook useEffect()

Hook useEffect() umožňuje vykonávať efekty v reakcii na zmeny stavu alebo životný cyklus komponenty. Vedľajší efekt sa spúšťa po vykreslení komponentu, alebo keď dôjde k zmene niektorej zo závislostí.

Inicializácia hooku vyzerá takto:

• Prvým argumentom je funkcia, ktorá obsahuje kód, ktorý sa má vykonať pri spustení efektu.
• Druhým argumentom je pole závislostí (dependencies), ktoré určuje, na čo efekt reaguje. Ak je prázdne, efekt sa spustí iba pri prvom vykreslení komponentu a potom sa už pri zmenách stavu alebo iných faktorov znovu spúšťať nebude. Ak pole obsahuje závislosti, efekt sa spustí, iba ak sa niektorá z týchto závislostí zmení.

Ak je pole závislostí prázdne, efekt bude fungovať ako metóda componentDidMount() v triedových komponentoch.

Hook useRef()

Tento hook umožňuje referencovať a manipulovať s DOM elementami alebo inými hodnotami vo vnútri funkčných komponentov.

Referenciu vytvoríme pomocou useRef() a priradením do premennej:

Referenciu prepojíme s DOM elementom tak, že ju priradíme atribútu ref na elemente:

Hook vracia objekt s jedinou vlastnosťou. Nazýva sa current. Vlastnosť je prvotne nastavená na hodnotu, ktorú sme nastavili pri vytvorení referencie pomocou useRef(). V našom prípade to je 0. Hodnotu potom ide ľubovoľne meniť:

Pre prístup k hodnote referencie použijeme zápis myRef.current:

Pre referenciu je kľúčové, že jej zmena nespôsobuje opätovné renderovanie komponentu. Preto je vhodná na ukladanie predchádzajúcich hodnôt medzi renderovaním. To znamená, že referencie sú ideálne na ukladanie informácií, ktoré neovplyvňujú vizuál komponentu.

Referencie by sa tiež nemali čítať alebo meniť v priebehu renderovania:

Pokiaľ v kóde potrebujeme referenciu čítať alebo meniť v priebehu renderovania, je vhodné použiť skôr stav pomocou hooku useState().

Čítanie hodnoty referencie alebo jej zmena sú naopak v poriadku pri obsluhovaní udalostí. Napríklad vo funkcii s názvom clickHandler(), alebo vo vnútri funkcie v hooku useEffect().

Praktická ukážka použitia hookov

Teraz si teóriu vyskúšame v praxi. Hooky využijeme v aplikácii, ktorú sme vytvorili v lekcii tohto kurzu s názvom Vykresľovanie v Reactu a jeho optimalizácia. Tam si tiež stiahneme z archívu kód aplikácie, ktorú spoločne rozšírime. Naša aplikácia bude po novom obsahovať input, na ktorý sa vytvorí focus zakaždým, keď bude Počet nepárne číslo:

Príprava projektu

Stiahnutý projekt si otvoríme v preferovanom editore kódu. V termináli si spustíme príkaz na inštaláciu modulov a projekt spustíme na lokálnom serveri:

Hook useState() v aplikácii

Hook useState() už v aplikácii využívame. Pre zopakovanie si otvoríme súbor MainComponent.js a pozrieme sa na už napísaný kód:

Zhrnieme si to podstatné:

• do súboru importujeme hook,
• inicializujeme stav Count s funkciou pre zmenu setCount a počiatočným stavom 0,
• pri kliknutí na tlačidlo sa spustí funkcia incerementCount(), ktorá zvýši stav premennej count o 1 vzhľadom na predchádzajúci stav.

Pridanie hookov useEffect() a useRef()

Teraz spoločne do aplikácie pridáme ďalšie dva hooky. Najskôr si otvoríme súbor MainCompChild.js, s ktorým budeme pracovať.

Do súboru pridáme import hookov:

Teraz si pod console.log vytvoríme referenciu:

Nepotrebujeme predvolenú hodnotu, pretože referenciu využijeme na vytvorenie referencie na DOM prvok, konkrétne input. Tento input si teraz do funkcie pridáme pod <h3> vo vykresľovacej časti funkcie:

Inputu priradíme vytvorenú referenciu av placeholderi vysvetlíme, čo chceme docieliť.

Pre krajší vzhľad pridáme cez inline štýly margin divu, ktorý obaľuje všetko, čo funkcie vracia:

Teraz potrebujeme zabezpečiť, aby input získal focus zakaždým, keď bude v premennej count nepárne číslo. Na to je ideálny hook useEffect(). Ten vykoná potrebné úkony zakaždým, keď sa zmení premenná count, ktorú mu pridáme do poľa závislostí.

Aby sme poznali aktuálny stav premennej count, posunieme si ju z rodičovskej komponenty pomocou props. V súbore MainComponent.js nahradíme vykreslenie <MainCompChild /> nasledujúcim kódom:

Vrátime sa späť do súboru MainCompChild.js av definícii funkcie ju pridáme props, pričom si premennú count rovno vytiahneme pomocou deštrukturalizácie:

Za vytvorenie referencie potom pridáme nasledujúci kód:

Zakaždým, keď sa zmení hodnota premennej count, funkcia v prvom argumente hooku overí, či je súčasný počet nepárny. Ak áno, zavolá metódu focus() na komponent v DOM prepojený s našou referenciou, teda na input. Ide o jeden z mála prípadov, kedy je vhodné v React priamo manipulovať s DOM elementmi.

A to je všetko:) Keď teraz klikáme na tlačidlo plus, pri nepárnych hodnotách počtu získa input focus. V aplikácii teraz využívame všetky tri predstavené hooky.

V nasledujúcej lekcii, Štylovanie kalkulačky pomocou Material UI , si pomocou knižnice komponentov Material UI naštylujeme kalkulačku.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.