Performancesoptimering hook useDeferredValue i React

Performancesoptimeringen hook useDeferredValue, ligesom useTransition, hjælper med at fremskynde grafisk grænseflades arbejde, men gør det på en lidt anden måde.

Kig på den forrige lektion og se, hvordan vi i tilfældet med useTransition indpakkede opdateringsfunktionen setFilterTerm. Nå, koden til opdatering af state er ikke altid tilgængelig. Den kan være skjult, for eksempel i et bibliotek, som du har tilføjet. I dette tilfælde kan vi bruge hooket useDeferredValue. Så er vi nødt til at indpakke enten selve state eller resultatet, beregnet ved hjælp af denne state, og derved nedsætte dens prioritet.

Lad os analysere følgende stykke kode fra barnekomponentet ProductList:

import {useDeferredValue} from 'react'

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

Bemærk, at her indpakkede vi i useDeferredValue selve variablen products, som vi tog fra komponentets props. Derefter gemte vi resultatet i deferredProducts, som vi vil arbejde videre med:

const deferredProducts = useDeferredValue(products);

Hvis vi nu i stykket kode fra hovedkomponentet, som vi betragtede i forrige lektion, fjerner linjen:

const [isPending, startTransition] = useTransition();

Og linjen med brugen af isPending:

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

Og samtidig fjerne indpakningen fra funktionen setFilterTerm, så får vi det samme resultat som i forrige lektion:

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