React-тегі useTransition өнімділік оңтайландыру хукі

useTransition өнімділікті оңтайландыру хукі бізге графификалық интерфейсті бұғаттамай стейттерді жаңартуға мүмкіндік береді.

Бұл хуктың көмегімен біз кейбір стейттің жаңаруына төмен басымдық тағайындай аламыз, бұл басқа стейттердің жаңаруына жоғары басымдық беріп, олардың кідіріссіз орындалуына мүмкіндік береді.

Мысал ретінде іздеу өрісіне пайдаланушы таңбалар енгізген кезде тауарлардың ашылмалы тізімін сүзгілеуді алуға болады. Әрине, тізімнің өзі кейбір кідіріспен көрсетілуі мүмкін, бірақ біз іздеу өрісіне таңбалардың кідіріспен енгізілуін қаламаймыз.

Мұндай жағдайларда useTransition хукі бізге қалай көмектесе алатынын қарап көрейік. Бізде негізгі компоненттің код бөлігі бар деп елестетейік. Оны талдап көрейік:

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

Мұнда біз useTransition үшін екі айнымалыны көреміз. isPending айнымалысы буль мәнін қамтиды және жаңару процесінің аяқталғандығын көрсетеді, ал startTransition функциясы жаңару басымдығын төмендетуге мүмкіндік береді:

const [isPending, startTransition] = useTransition();

Сондай-ақ бізде filterTerm стейті бар, онда енгізу өрісіне енгізілетін өрнек сақталады және оны орнату үшін setFilterTerm функциясы бар:

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

Енгізу өрісіне таңбалар енгізу кезінде әр жолы updateFilterHandler функциясы шақырылады, онда filterTerm жаңарады. Дәл осы жерде біз useTransition хукін қолданамыз, орнату функциясын setFilterTerm startTransition ішіне келесідей ораймыз:

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

Осылайша, біз filterTerm стейтінің жаңаруына төмен басымдық тағайындадық және біздің енгізу өрісі жауап берушілігін сақтайды.

isPending айнымалысының көмегімен біз пайдаланушыға тізімдің жаңаруы әлі жүріп жатқанын көрсете аламыз. Тізім жаңарып жатқан кезде бұл ақпаратты енгізу өрісінің астына шығарайық:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>жаңарып жатыр ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);