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