Hook useRef pre prácu s refami v Reacte

V tejto lekcii budeme pracovať s refami. Pre názornosť si rozoberme fungovanie hooku useRef v porovnaní s hookom useState.

Vytvorme komponent s tlačidlom:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

Importujme do komponentu useState:

App.jsximport { useState } from 'react';

A vytvorme state state:

App.jsxconst [state, setState] = useState(0);

A teraz urobme tak, aby pri kliknutí na tlačidlo sa náš state zvýšil o 1. Hodnotu state budeme vypisovať priamo do textu tlačidla:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

Opíšme funkciu pre spracovanie kliknutia na tlačidlo handleStateClick:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

Klikajme na tlačidlo a uvidíme, ako rastie hodnota state.

A teraz vytvorme komponent App, ale použime nie state, ale ref.

Na začiatok importujme do komponentu useRef:

App.jsximport { useRef } from 'react';

A vytvorme ref ref. Hook useRef ako výsledok vracia objekt refu s jedinou vlastnosťou current, ktorá nás bude zaujímať v ďalšom. Nastavme jeho počiatočnú hodnotu na 0:

App.jsxconst ref = useRef(0);

Nastavme na tlačidlo spracovateľ kliknutia. Pamätajte, že musíme čítať/meniť nie samotný ref, ale jeho vlastnosť current:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

Pridajme funkciu pre spracovanie kliknutia na naše tlačidlo. Tu budeme zvyšovať current o 1, ako v predchádzajúcom príklade so state. Na rozdiel od state, kde je potrebná funkcia setState na zmenu jeho hodnoty, s vlastnosťou refu pracujeme priamo:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

Teraz klikajme na naše tlačidlo. A čo vidíme? Pri kliknutí naň, ako sme mali pôvodne 0, tak sa to ani nemení.

Vy, samozrejme, môžete začať pochybovať o tom, že sa hodnota vôbec mení. Overme si to. Preto do funkcie spracovateľa kliknutia pridajme ešte riadok kódu s výpisom hodnoty current do konzoly:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

A teraz, otvoríme konzolu v prehliadači, znova klikajme na tlačidlo a presvedčíme sa, že hodnota sa naozaj mení pri každom kliknutí a žiadny podvod nie je.

Teraz vidíme, že na rozdiel od state, zmena hodnoty refu nespôsobuje renderovanie komponentu. Preto sme každý krát v texte tlačidla videli počiatočnú hodnotu 0.

Takže, ak sa vaše údaje používajú na renderovanie, tak ich uchovávajte v state, a ak nepotrebujete renderovanie, v takom prípade použitie refov môže byť efektívnejšie.