Ytelsesoptimaliserings-hooken useDeferredValue i React

Ytelsesoptimaliserings-hooken useDeferredValue, akkurat som useTransition, hjelper til med å fremskynde arbeidet til grafiske grensesnitt, men gjør dette på en litt annen måte.

Ta en titt på forrige leksjon og se hvordan vi i tilfellet med useTransition innpakket oppdateringsfunksjonen setFilterTerm. Sannheten er at koden som oppdaterer state ikke alltid er tilgjengelig. Den kan være skjult, for eksempel i et bibliotek som du har koblet til. I dette tilfellet kan vi bruke hooken useDeferredValue. Da må vi innpakke enten selve staten, eller resultatet som beregnes ved hjelp av denne staten, og dermed redusere dens prioritet.

La oss analysere følgende kodesnutt fra barnekomponentet ProductList:

import {useDeferredValue} from 'react'

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

Legg merke til at her pakket vi i useDeferredValue selve variabelen products, som vi hentet fra komponentets props. Deretter skrev vi resultatet til deferredProducts, som vi vil jobbe videre med:

const deferredProducts = useDeferredValue(products);

Hvis vi nå i kodesnutten fra hovedkomponenten, som vi vurderte i forrige leksjon, fjerner linjen:

const [isPending, startTransition] = useTransition();

Og linjen med bruk av isPending:

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

Og også fjerne innpakningen fra funksjonen setFilterTerm, så får vi det samme resultatet som i forrige leksjon:

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