Veiktspējas optimizācijas āķis useDeferredValue React

Veiktspējas optimizācijas āķis useDeferredValue, tāpat kā useTransition, palīdz paātrināt grafiskās saskarnes darbību, bet to dara nedaudz savādāk.

Apskatiet iepriekšējo nodarbību un redziet, kā useTransition gadījumā mēs ietinām atjaunināšanas funkciju setFilterTerm. Tā nu, stāvokļa atjaunināšanas kods ne vienmēr var būt pieejams. Tas var būt paslēpts, piemēram, bibliotēkā, ko esat pievienojis. Šajā gadījumā mēs varam izmantot āķi useDeferredValue. Tad mums vajag ietīt vai nu pašu stāvokli, vai rezultātu, kas aprēķināts izmantojot šo stāvokli, tā samazinot tā prioritāti.

Analizēsim šādu pakārtotā komponenta ProductList koda fragmentu:

import {useDeferredValue} from 'react'

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

Ievērojiet, ka šeit mēs ietinām useDeferredValue pašu mainīgo products, ko paņēmām no komponenta propsiem. Tad mēs ierakstījām rezultātu deferredProducts, ar kuru turpināsim strādāt:

const deferredProducts = useDeferredValue(products);

Tagad, ja galvenā komponenta koda fragmentā, ko apskatījām iepriekšējā nodarbībā, noņemt rindu:

const [isPending, startTransition] = useTransition();

Un rindu ar isPending izmantošanu:

{isPending && <p>atjaunina ...</p>}

Un noņemt ietīšanu no funkcijas setFilterTerm, tad iegūsim to pašu rezultātu kā iepriekšējā nodarbībā:

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