Prestandaoptimeringshooket useTransition i React

Prestandaoptimeringshooket useTransition tillåter oss att uppdatera tillstånd utan att blockera användargränssnittet.

Med denna hook kan vi tilldela en låg prioritet för uppdateringen av ett visst tillstånd, vilket gör att uppdateringar av andra tillstånd kan ha hög prioritet och utföras utan fördröjningar.

Ett exempel på detta är filtrering av en rullgardinslista med produkter när användaren skriver in tecken i sökfältet. Listan kan förstås visas med en viss fördröjning, men vi skulle inte vilja att tecknen skrivs in i sökfältet med fördröjning.

Låt oss se hur hooken useTransition kan hjälpa oss i sådana fall. Antag att vi har en kodbit från huvudkomponenten. Låt oss analysera den:

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>
	);
}

Här ser vi två variabler för useTransition. Variabeln isPending innehåller ett booleskt värde och visar om uppdateringsprocessen är avslutad, och startTransition är en funktion som möjliggör att sänka prioriteten för en uppdatering:

const [isPending, startTransition] = useTransition();

Vi har också ett tillstånd filterTerm, där uttrycket som skrivs in i inmatningsfältet lagras, och en funktion setFilterTerm för att ställa in det:

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

När tecken skrivs in i inputfältet anropas funktionen updateFilterHandler varje gång, där uppdateringen av filterTerm sker. Det är här vi använder vår hook useTransition, genom att wrappa inställningsfunktionen setFilterTerm i startTransition på följande sätt:

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

På så sätt har vi satt en låg prioritet för uppdateringen av tillståndet filterTerm och vårt inmatningsfält förblir responsivt.

Med hjälp av variabeln isPending kan vi visa användaren att listuppdateringen fortfarande pågår. Låt oss visa denna information under inmatningsfältet medan listan uppdateras:

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