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:

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

Importujme do komponentu useState:

import { useState } from 'react';

A vytvorme state state:

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

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

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

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

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

const ref = useRef(0);

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

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

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

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

Nech vo vašom komponente je odsek s textom 'text' a tlačidlo. Urobte tak, aby každý krát pri kliknutí na tlačidlo na koniec textu odseku sa pridala výkričník. Urobte to pomocou state.

Vytvorte komponent App, ale namiesto state teraz použite ref. Presvedčte sa, že pri stlačení tlačidla text odseku sa nebude meniť. Pridajte tiež výpis textu odseku do konzoly, otvorte ju a presvedčte sa, že v skutočnosti sa text mení.