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