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:

return (
	<div>
		<button>
			state klik
		</button>
	</div>
);

Importujmo u komponentu useState:

import { useState } from 'react';

I postavimo stanje state:

const [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:

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

Opisujemo funkciju za obradu klika na dugme handleStateClick:

function 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:

import { 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:

const ref = useRef(0);

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

<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:

function 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:

function 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.

Neka u vašoj komponenti postoji pasus sa tekstom 'text' i dugme. Učinite tako da svaki put pri pritisku na dugme na kraj teksta pasusa bude dodavan uzvičnik. Učinite ovo pomoću stanja.

Kreirajte komponentu App, ali umesto stanja sada koristite ref. Uverite se da pri pritisku na dugme tekst pasusa neće se menjati. Dodajte i prikaz teksta pasusa u konzolu, otvorite je i uverite se, da se tekst zapravo menja.