Hook useRef pro práci s refy v Reactu

V této lekci budeme pracovat s refy. Pro názornost si rozebereme funkci hoku useRef ve srovnání s hokem useState.

Vytvořme komponentu s tlačítkem:

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

Importujme do komponenty useState:

import { useState } from 'react';

A vytvořme stav state:

const [state, setState] = useState(0);

A nyní udělejme tak, aby po kliknutí na tlačítko se náš state zvýšil o 1. Hodnotu stavu budeme vypisovat přímo do textu tlačítka:

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

Pojďme popsat funkci pro zpracování kliknutí na tlačítko handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Klikněme na tlačítko a uvidíme, jak hodnota stavu roste.

A nyní vytvořme komponentu App, ale použijme nikoli stav, ale ref.

Nejprve importujme do komponenty useRef:

import { useRef } from 'react';

A vytvořme ref ref. Hook useRef vrací jako výsledek objekt refu s jedinou vlastností current, která nás bude zajímat v dalším kroku. Nastavme jeho počáteční hodnotu na 0:

const ref = useRef(0);

Přidejme na tlačítko obslužnou rutinu kliknutí. Pamatujte, že musíme číst/měnit nikoli samotný ref, ale jeho vlastnost current:

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

Přidejme funkci pro zpracování kliknutí na naše tlačítko. Zde budeme zvyšovat current o 1, stejně jako v předchozím příkladu se stavem. Na rozdíl od stavu, kde je vyžadována funkce setState pro změnu jeho hodnoty, s vlastností refu pracujeme přímo:

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

Nyní klikněme na naše tlačítko. A co vidíme? Při kliknutí na něj, jak jsme měli původně 0, tak se nemění.

Můžete samozřejmě začít pochybovat o tom, že se hodnota vůbec mění. Pojďme to zkontrolovat. K tomu přidáme do funkce obslužné rutiny kliknutí další řádek kódu s výpisem hodnoty current do konzole:

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

A nyní, otevřeme-li konzoli v prohlížeči, znovu klikněme na tlačítko a přesvědčme se, že hodnota se skutečně mění při každém kliknutí a žádný podvod neexistuje.

Nyní vidíme, že na rozdíl od stavu, změna hodnoty refu nezpůsobuje renderování komponenty. Proto pokaždé v textu tlačítka vidíme počáteční hodnotu 0.

Pokud jsou tedy vaše data používána pro renderování, ukládejte je do stavu, a pokud nepotřebujete renderování, v takovém případě může být použití refů efektivnější.

Nechť je ve vaší komponentě odstavec s textem 'text' a tlačítko. Udělejte tak, aby pokaždé po kliknutí na tlačítko se na konec textu odstavce přidala vykřičník. Udělejte to pomocí stavu.

Vytvořte komponentu App, ale místo stavu nyní použijte ref. Přesvědčte se, že při stisknutí tlačítka se text odstavce nebude měnit. Přidejte také výpis textu odstavce do konzole, otevřete ji a přesvědčte se, že text se ve skutečnosti mění.