Hook pro optimalizaci výkonu useTransition v Reactu

Hook pro optimalizaci výkonu useTransition nám umožňuje aktualizovat stavy bez blokování grafického rozhraní.

S pomocí tohoto hooku můžeme nastavit aktualizaci nějakého stavu nízkou prioritu, což umožní aktualizaci jiných stavů mít vysokou prioritu a provádět se bez zpoždění.

Jako příklad lze uvést filtrování rozbalovacího seznamu produktů při zadávání znaků uživatelem do pole vyhledávání. Samozřejmě, samotný seznam se může zobrazovat s určitým zpožděním, ale nechtěli bychom, aby se znaky zadávaly do pole vyhledávání se zpožděním.

Podívejme se, jak nám v takových případech může pomoci hook useTransition. Předpokládejme, že máme kus kódu hlavní komponenty. Pojďme jej analyzovat:

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>
	);
}

Zde vidíme dvě proměnné pro useTransition. Proměnná isPending obsahuje logickou hodnotu a ukazuje, zda je proces aktualizace ukončen, a startTransition funkci, která umožňuje snížit prioritu aktualizace:

const [isPending, startTransition] = useTransition();

Také máme stav filterTerm, ve kterém je uložen výraz zadávaný do vstupního pole a funkce setFilterTerm pro jeho nastavení:

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

Při zadávání znaků do vstupního pole se nám pokaždé volá funkce updateFilterHandler, ve které probíhá aktualizace filterTerm. Právě zde používáme náš hook useTransition, obalujeme funkci nastavení setFilterTerm do startTransition následovně:

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

Tímto jsme nastavili pro aktualizaci stavu filterTerm nízkou prioritu a naše vstupní pole zůstane reagující.

Pomocí proměnné isPending můžeme uživateli ukázat, že aktualizace seznamu stále probíhá. Vypišme tuto informaci pod vstupní pole, dokud se seznam aktualizuje:

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