Prestatie-optimalisatie Hook useTransition in React

De prestatie-optimalisatie hook useTransition stelt ons in staat states bij te werken zonder de gebruikersinterface te blokkeren.

Met deze hook kunnen we een lage prioriteit toekennen aan het bijwerken van een state, waardoor het bijwerken van andere states een hoge prioriteit kan hebben en zonder vertragingen kan worden uitgevoerd.

Een voorbeeld is het filteren van een vervolgkeuzelijst met producten terwijl de gebruiker tekens invoert in het zoekveld. Natuurlijk kan de lijst zelf worden weergegeven met enige vertraging, maar we zouden niet willen dat de tekens in het zoekveld met vertraging worden ingevoerd.

Laten we eens kijken hoe de hook useTransition ons in dergelijke gevallen kan helpen. Stel, we hebben een stuk code van het hoofd- component. Laten we het analyseren:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Hier zien we twee variabelen voor useTransition. De variabele isPending bevat een booleaanse waarde en geeft aan of het updateproces is voltooid, en startTransition is de functie die het mogelijk maakt om de prioriteit van de update te verlagen:

const [isPending, startTransition] = useTransition();

We hebben ook de state filterTerm, waarin de invoerexpressie wordt opgeslagen, en de functie setFilterTerm om deze in te stellen:

const [filterTerm, setFilterTerm] = useState('');

Bij het invoeren van tekens in de input wordt elke keer de functie updateFilterHandler aangeroepen, waarin de filterTerm wordt bijgewerkt. Dit is waar we onze hook useTransition toepassen, door de set-functie setFilterTerm in startTransition te wrappen als volgt:

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

Op deze manier hebben we een lage prioriteit ingesteld voor het bijwerken van de state filterTerm en blijft ons invoerveld responsief.

Met behulp van de variabele isPending kunnen we de gebruiker laten zien dat de update van de lijst nog bezig is. Laten we deze informatie weergeven onder het invoerveld, zolang de lijst wordt bijgewerkt:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>Bijwerken ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);