Hook useRef za rad sa refovima u Reactu

U ovoj lekciji ćemo raditi sa refovima. Radi jasnoće, hajde da analiziramo rad huka useRef upoređujući ga sa hukom useState.

Hajde da kreiramo komponentu sa dugmetom:

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

Importujmo u komponentu useState:

App.jsximport { useState } from 'react';

I postavimo stanje state:

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

A sada napravimo da se pritiskom na dugme naše state povećava za 1. Vrednost stanja ćemo prikazati direktno u tekstu dugmeta:

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

Opisujemo funkciju za obradu klika na dugme handleStateClick:

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

Pritisnimo dugme i videćemo kako raste vrednost stanja.

A sada hajde da kreiramo komponentu App, ali koristeći ne stanje, već ref.

Za početak, importujmo u komponentu useRef:

App.jsximport { useRef } from 'react';

I postavimo ref ref. Svojim rezultatom huk useRef vraća objekat refa sa jedinstvenim svojstvom current, koje će nas i zanimati u nastavku. Postavimo mu početnu vrednost na 0:

App.jsxconst ref = useRef(0);

Postavimo na dugme rukovalac klika. Zapamtite da treba da čitamo/menjamo ne sam ref, već njegovo svojstvo current:

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

Dodajmo funkciju za obradu klika na naše dugme. Ovde ćemo povećavati current za 1, kao i u prethodnom primeru sa stanjem. Za razliku od stanja, gde je potrebna funkcija setState za promenu njegove vrednosti, sa svojstvom refa radimo direktno:

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

Sada pritisnimo naše dugme. I šta vidimo? Pri pritisku na njega, kako je bilo u početku 0, tako i ne menja se.

Vi, naravno, možete početi da sumnjate u to da se vrednost uopšte menja. Hajde da ovo proverimo. Za ovo u funkciji rukovalca klika dodajmo još jedan red koda sa prikazivanjem vrednosti current u konzoli:

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

A sada, otvorivši konzolu u brauzeru, ponovo pritisnimo dugme i uverimo se da se vrednost zaista menja pri svakom pritisku i da nema obmane.

Sada vidimo da, za razliku od stanja, promena vrednosti refa ne izaziva ponovno renderovanje komponente. Zato svaki put u tekstu dugmeta vidimo početnu vrednost 0.

Tako da, ako vaši podaci se koriste za renderovanje, onda ih čuvajte u stanju, a ako vam ne treba renderovanje, u takvom slučaju korišćenje refova može postati efikasnije.