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