Prestasie-optimalisering hook useDeferredValue in React

Die prestasie-optimalisering hook useDeferredValue, net soos useTransition, help om die werksverrigting van die grafiese koppelvlak te bespoedig, maar doen dit op 'n effens ander manier.

Kyk na die vorige les en sien hoe ons in die geval van useTransition die opdateringsfunksie setFilterTerm toegedraai het. Nou, die kode om die staat op te dateer is nie altyd beskikbaar nie. Dit kan weggesteek wees, byvoorbeeld in 'n biblioteek wat jy ingesluit het. In hierdie geval kan ons die hook useDeferredValue gebruik. Dan moet ons óf die staat self toedraai, óf die resultaat wat met hierdie staat bereken word, en sodoende die prioriteit daarvan verlaag.

Kom ons ontleed die volgende stukkie kode van die kind-komponent ProductList:

import {useDeferredValue} from 'react'

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

Let op dat ons hier die veranderlike products self toegedraai het met useDeferredValue, wat ons uit die props van die komponent geneem het. Toe het ons die resultaat in deferredProducts geskryf, waarmee ons verder sal werk:

const deferredProducts = useDeferredValue(products);

Nou, as ons in die stukkie kode van die hoofkomponent wat ons op die vorige les beskou het, die reël verwyder:

const [isPending, startTransition] = useTransition();

En die reël waar isPending gebruik word:

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

En ook die omhulsel van die funksie setFilterTerm verwyder, dan kry ons dieselfde resultaat as op die vorige les:

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