Prestatie-optimalisatie hook useDeferredValue in React

De prestatie-optimalisatie hook useDeferredValue, net zoals useTransition, helpt de werking van de grafische interface te versnellen, maar doet dit op een iets andere manier.

Bekijk de vorige les en kijk hoe we in het geval van useTransition de updatefunctie setFilterTerm verpakten. Welnu, de code voor het updaten van de state is niet altijd beschikbaar. Deze kan verborgen zijn, bijvoorbeeld in een bibliotheek die je hebt geïmporteerd. In dat geval kunnen we gebruikmaken van de hook useDeferredValue. Dan moeten we ofwel de state zelf verpakken, of het resultaat, dat met behulp van deze state wordt berekend, en zo de prioriteit ervan verlagen.

Laten we het volgende stukje code van de child component ProductList analyseren:

import {useDeferredValue} from 'react'

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

Let op dat we hier de variabele products zelf hebben verpakt in useDeferredValue, die we uit de props van de component hebben gehaald. Vervolgens hebben we het resultaat in deferredProducts opgeslagen, waarmee we verder zullen werken:

const deferredProducts = useDeferredValue(products);

Als we nu in het stukje code van de hoofdcomponent, dat we in de vorige les hebben bekeken, de regel:

const [isPending, startTransition] = useTransition();

En de regel met het gebruik van isPending verwijderen:

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

En ook de verpakking van de functie setFilterTerm weghalen, dan krijgen we hetzelfde resultaat als in de vorige les:

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