Хук аптымізацыі прадукцыйнасці 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>updating ...</p>}

А таксама зняць абгортку з функцыі setFilterTerm, то мы атрымаем той жа вынік, што і на мінулым уроку:

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