Ytelsesoptimaliseringshooken useTransition i React

Ytelsesoptimaliseringshooken useTransition tillater oss å oppdatere tilstander uten å blokkere det grafiske grensesnittet.

Med denne hooken kan vi tildele en lav prioritet til oppdateringen av en tilstand, noe som lar oppdateringer av andre tilstander ha høy prioritet og utføres uten forsinkelser.

Et eksempel kan være filtrering av en rullegardinliste med produkter mens brukeren skriver tegn i søkefeltet. Selvfølgelig kan listen vises med en viss forsinkelse, men vi ønsker ikke at tegnene som skrives inn i søkefeltet, skal ha forsinkelse.

La oss se hvordan hooken useTransition kan hjelpe oss i slike tilfeller. Anta at vi har et kodeutdrag fra hovedkomponenten. La oss analysere 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>
	);
}

Her ser vi to variabler for useTransition. Variabelen isPending inneholder en boolsk verdi og viser om oppdateringsprosessen er avsluttet, mens startTransition er en funksjon som tillater oss å senke prioriteten på oppdateringen:

const [isPending, startTransition] = useTransition();

Vi har også en tilstand filterTerm, som lagrer uttrykket som skrives inn i inndatafeltet, og en funksjon setFilterTerm for å sette den:

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

Ved inntasting av tegn i inndatafeltet kalles funksjonen updateFilterHandler hver gang, der oppdateringen av filterTerm skjer. Det er her vi bruker vår hook useTransition, ved å pakke inn settfunksjonen setFilterTerm i startTransition som følger:

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

Dermed har vi satt lav prioritet for oppdateringen av tilstanden filterTerm, og vårt inndatafelt forblir responsivt.

Ved hjelp av variabelen isPending kan vi vise brukeren at oppdateringen av listen fortsatt pågår. La oss vise denne informasjonen under inndatafeltet mens listen oppdateres:

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