Хук оптимизације перформанси useDeferredValue у React-у

Хук оптимизације перформанси 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);
}