Uporaba prehodnega kavka (useTransition) za optimizacijo zmogljivosti v Reactu

Kavk za optimizacijo zmogljivosti useTransition nam omogoča posodabljanje stanj brez blokiranja grafičnega vmesnika.

S tem kavkom lahko določimo posodobitvi nekega stanja nizko prioriteto, kar omogoča, da imajo posodobitve ostalih stanj visoko prioriteto in se izvajajo brez zakasnitev.

Kot primer lahko navedemo filtriranje spustnega seznama izdelkov med vnašanjem znakov v iskalno polje s strani uporabnika. Seveda se lahko seznam prikaže z določeno zakasnitvijo, vendar ne želimo, da se znaki vnašajo v iskalno polje z zakasnitvijo.

Poglejmo, kako nam lahko v takih primerih pomaga kavk useTransition. Predpostavimo, da imamo kos kode glavnega komponenta. Analizirajmo ga:

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

Tu vidimo dve spremenljivki za useTransition. Spremenljivka isPending vsebuje logično vrednost in kaže, ali je proces posodabljanja končan, medtem ko startTransition je funkcija, ki omogoča znižanje prioritete posodobitve:

const [isPending, startTransition] = useTransition();

Prav tako imamo stanje filterTerm, v katerem je shranjen izraz, vnesen v polje za vnos, in funkcijo setFilterTerm za njegovo nastavitev:

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

Ob vnosu znakov v vnosno polje se vsakič pokliče funkcija updateFilterHandler, v kateri pride do posodobitve filterTerm. Prav tu uporabimo naš kavk useTransition, tako da funkcijo nastavitve setFilterTerm ovijemo v startTransition na naslednji način:

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

Tako smo določili za posodobitev stanja filterTerm nizko prioriteto in naše vnosno polje ostane odzivno.

S pomočjo spremenljivke isPending lahko uporabniku pokažemo, da je posodobitev seznama še v teku. Izpišimo to informacijo pod vnosnim poljem, medtem ko se seznam posodablja:

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