Prestandaoptimerings hooken useDeferredValue i React

Prestandaoptimerings hooken useDeferredValue, precis som useTransition, hjälper till att snabba upp gränssnittets arbete, men gör det på ett lite annorlunda sätt.

Ta en titt på föregående lektion och se hur vi i fallet med useTransition lindade in uppdateringsfunktionen setFilterTerm. Koden för att uppdatera tillståndet är inte alltid tillgänglig. Den kan vara gömd, till exempel i ett bibliotek som du har anslutit. I det här fallet kan vi använda hooken useDeferredValue. Då behöver vi linda in antingen tillståndet i sig eller resultatet, beräknat med hjälp av detta tillstånd, och därigenom sänka dess prioritet.

Låt oss analysera följande kodstycke från barnkomponenten ProductList:

import {useDeferredValue} from 'react'

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

Lägg märke till att här lindade vi in variabeln products i sig i useDeferredValue, vilken vi hämtade från komponentens props. Sedan sparade vi resultatet i deferredProducts, som vi kommer att arbeta med härnäst:

const deferredProducts = useDeferredValue(products);

Om vi nu i kodstycket från huvudkomponenten, som vi tittade på i förra lektionen, tar bort raden:

const [isPending, startTransition] = useTransition();

Och raden med användningen av isPending:

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

Och även ta bort lindningen från funktionen setFilterTerm, så får vi samma resultat som i förra lektionen:

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