Hook optimalizácie výkonu useTransition v Reacte

Hook optimalizácie výkonu useTransition nám umožňuje aktualizovať stavy bez blokovania grafického používateľského rozhrania.

Pomocou tohto hooku môžeme nastaviť aktualizácii nejakého stavu nízku prioritu, čo umožní aktualizácii iných stavov mať vysokú prioritu a vykonávať sa bez oneskorení.

Ako príklad môžeme uviesť filtrovanie rozbaľovacieho zoznamu produktov pri zadaní znakov používateľom do poľa vyhľadávania. Samozrejme, samotný zoznam sa môže zobrazovať s určitým oneskorením, ale nechceli by sme, aby sa znaky zadávali do vyhľadávacieho poľa s oneskorením.

Pozrime sa, ako nám v takýchto prípadoch môže pomôcť hook useTransition. Predpokladajme, že máme kúsok kódu hlavného komponentu. Poďme ho analyzovať:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Vidíme tu dve premenné pre useTransition. Premenná isPending obsahuje booleovskú hodnotu a ukazuje, či je proces aktualizácie ukončený, a startTransition je funkcia, ktorá umožňuje znížiť prioritu aktualizácie:

const [isPending, startTransition] = useTransition();

Máme tiež stav filterTerm, v ktorom je uložený výraz zadaný do vstupného poľa a funkcia setFilterTerm na jeho nastavenie:

const [filterTerm, setFilterTerm] = useState('');

Pri zadávaní znakov do vstupu sa nám zakaždým volá funkcia updateFilterHandler, v ktorej prebieha aktualizácia filterTerm. Práve tu používame náš hook useTransition, tak že obalíme funkciu nastavenia setFilterTerm do startTransition nasledovne:

function updateFilterHandler(event) {
	startTransition(() => {
		setFilterTerm(event.target.value);
	});
}

Týmto spôsobom sme nastavili pre aktualizáciu stavu filterTerm nízku prioritu a naše vstupné pole zostane citlivé na zmenu.

Pomocou premennej isPending môžeme používateľovi ukázať, že aktualizácia zoznamu ešte prebieha. Vypíšme túto informáciu pod vstupným poľom, kým sa zoznam aktualizuje:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>aktualizácia ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);