React'теги useDeferredValue өндүрүмдүүлүк көйгөйү

Өндүрүмдүүлүк көйгөйү useDeferredValue, ошондой эле useTransition сыяктуу, графикалык интерфейстин ишин тездетет, бирок аны башкачача жасайт.

Өткөн сабакты карап көрүңүз жана useTransition учурда биз кандайча setFilterTerm жаңыртуу функциясын ороп алганыбызды көрүңүз. Ошентип, абалды жаңыртуу коду ар дайым жеткиликтүү болбошу мумкин. Ал, мисалы, сиз кошкон китепканада жашырылып калышы мүмкүн. Бул учурда биз useDeferredValue көйгөйүн колдонсак болот. Анда бизге абалды же натыйжаны ошол абалды колдонуп эсептеп чыкканда ороп алуу керек, ошону менен анын артыкчылыгын төмөндөтөбүз.

Келгиле, ProductList туунду компонентинин төмөнкү кичинекей бөлүгүн талдап көрөлү:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Бул жерде биз useDeferredValue менен компоненттин пропстеринен алган products өзгөрмөсүн ороп алганыбызга көңүл бөлүңүз. Андан кийин биз натыйжаны deferredProducts катары жазып, аны кийинчерээк колдонобуз:

const deferredProducts = useDeferredValue(products);

Эми, биз мурунку сабакта карап чыккан негизги компоненттин бөлүгүндө төмөнкү сапты алып салсак:

const [isPending, startTransition] = useTransition();

Жана isPending колдонулган сапты:

{isPending && <p>жаңылатууда ...</p>}

Ошондой эле setFilterTerm функциясынан оругучу алып таштак, анда биз мурунку сабактагыдай эле натыйжа алабыз:

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