Kifaa cha Uboreshaji wa Utendaji useTransition katika React

Kifaa cha uboreshaji wa utendaji useTransition kinaturuhusu kusasisha hali (state) bila kuzuia kiingilio cha grafiki.

Kwa kutumia kifaa hiki, tunaweza kubainisha kipaumbele cha chini kwa kusasisha hali fulani, jambo linaloruhusu kusasisha kwa hali zingine kuwa na kipaumbele cha juu na kutekelezwa bila kucheleweshwa.

Mfano unaoweza kutolewa ni uchujaji wa orodha inayotiririka ya bidhaa wakati mtumiaji anaingiza herufi kwenye uwanja wa utafutaji. Bila shaka, orodha yenyewe inaweza kuonyeshwa kwa ucheleweshaji fulani, lakini hatungependa herufi ziingizwe kwenye uwanja wa utafutaji kwa ucheleweshaji.

Wacha tuone jinsi katika hali kama hizi kifaa useTransition kinatufaa. Tukichukulia, tuna kipande cha msimbo wa sehemu kuu ya kijenzi. Wacha tuchambue:

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

Hapa tunaona vigezo viwili kwa ajili ya useTransition. Kigezo isPending kinachukua thamani ya boolean na kinaonyesha kama mchakato wa kusasisha umekwisha, wakati startTransition ni kitendakazi kinachoruhusu kupunguza kipaumbele cha kusasisha:

const [isPending, startTransition] = useTransition();

Pia tuna hali filterTerm, ambayo inahifadhi usemi unaoingizwa kwenye uwanja wa kuingiza na kitendakazi setFilterTerm kwa ajili ya kuiweka:

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

Wakati wa kuingiza herufi kwenye uingizaji (input) kila wakati kitendakazi updateFilterHandler kinaitwa, ambapo kusasisha kwa filterTerm hufanyika. Hapa ndipo tunatumia kifaa chetu useTransition, kukikinga kitendakazi cha kuweka setFilterTerm kwenye startTransition kama ifuatavyo:

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

Kwa njia hii, tumeweka kipaumbele cha chini kwa ajili ya kusasisha hali filterTerm na uwanja wetu wa kuingiza utabaki kuwa unaokubali mabadiliko.

Kwa kutumia kigezo isPending tunaweza kumwonyesha mtumiaji, kwamba kusasisha orodha bado kunaendelea. Tuonyeshe taarifa hii chini ya uwanja wa kuingiza, wakati orodha inasasishwa:

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