Huku i Optimizimit të Performancës useTransition në React

Huku i optimizimit të performancës useTransition na lejon të përditësojmë state-et pa bllokuar ndërfaqen grafike.

Me ndihmën e këtij huku ne mund të caktojmë për përditësimin e një state-i prioritet të ulët, që do të lejojë përditësimin e state-ve të tjerë të kenë prioritet të lartë dhe të ekzekutohen pa vonesa.

Si shembull mund të përmendet filtrim i listës rënëse të produkteve gjatë futjes së simboleve nga përdoruesi në fushën e kërkimit. Sigurisht, vetë lista mund të shfaqet me një vonesë, por ne nuk do të dëshironim që simbolet të futeshin në fushën e kërkimit me vonesë.

Le të shohim se si në raste të tilla na mund të ndihmojë huku useTransition. Le të supozojmë se kemi një copë kodi të komponentit kryesor. Le ta analizojmë atë:

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

Këtu shohim dy variabla për useTransition. Variabla isPending përmban një vlerë boolean dhe tregon nëse procesi i përditësimit ka përfunduar, ndërsa startTransition është funksioni që lejon uljen e prioritetit të përditësimit:

const [isPending, startTransition] = useTransition();

Gjithashtu kemi state-in filterTerm, ku ruhet shprehja e futur në fushën e inputit dhe funksionin setFilterTerm për ta vendosur atë:

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

Gjatë futjes së simboleve në input çdo herë thirret funksioni updateFilterHandler, ku ndodh përditësimi i filterTerm. Pikërisht këtu ne përdorim hukun tonë useTransition, duke mbështjellë funksionin e vendosjes setFilterTerm në startTransition si më poshtë:

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

Kështu, ne kemi caktuar për përditësimin e state-it filterTerm prioritet të ulët dhe fusha jonë e inputit do të mbetet e përgjegjshme.

Me ndihmën e variablës isPending ne mund t'i tregojmë përdoruesit se përditësimi i listës është ende në proces. Le ta shfaqim këtë informacion nën fushën e inputit, derisa lista të përditësohet:

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