Hook za optimizaciju performansi useTransition u React-u

Hook za optimizaciju performansi useTransition omogućava nam ažuriranje stanja bez blokiranja grafičkog interfejsa.

Pomoću ovog hook-a možemo postaviti nizak prioritet ažuriranju bilo kog stanja, što će omogućiti da ažuriranja drugih stanja imaju visok prioritet i izvršavaju se bez kašnjenja.

Kao primer možemo navesti filtriranje padajuće liste proizvoda prilikom unosa simbola od strane korisnika u polje pretrage. Naravno, sama lista se može prikazivati sa određenim kašnjenjem, ali mi ne bismo želeli da se simboli unose u polje pretrage sa kašnjenjem.

Pogledajmo kako nam u takvim slučajevima može pomoći hook useTransition. Pretpostavimo da imamo deo koda glavnog komponenta. Hajde da ga analiziramo:

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

Ovde vidimo dve promenljive za useTransition. Promenljiva isPending sadrži bulovsku vrednost i pokazuje da li je proces ažuriranja završen, a startTransition je funkcija koja omogućava smanjenje prioriteta ažuriranja:

const [isPending, startTransition] = useTransition();

Takođe imamo stanje filterTerm, u kojem se čuva izraz koji se unosi u polje za unos i funkcija setFilterTerm za njegovo postavljanje:

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

Prilikom unosa simbola u input, kod nas svaki put poziva funkcija updateFilterHandler, u kojoj se dešava ažuriranje filterTerm. Upravo ovde primenjujemo naš hook useTransition, obavijajući funkciju postavljanja setFilterTerm u startTransition na sledeći način:

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

Na ovaj način, postavili smo za ažuriranje stanja filterTerm nizak prioritet i naše polje za unos će ostati odzivno.

Pomoću promenljive isPending mi možemo pokazati korisniku da je ažuriranje liste još u toku. Ispisaćemo tu informaciju ispod polja za unos, dok se lista ažurira:

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