Reacts performansoptimering hook useTransition

Performansoptimeringen hook useTransition giver os mulighed for at opdatere tilstande uden at blokere brugergrænsefladen.

Med denne hook kan vi tildele en opdatering af en tilstand lav prioritet, hvilket giver andre tilstandsopdateringer høj prioritet og udførelse uden forsinkelse.

Et eksempel kunne være filtrering af en dropdown-liste over varer, mens brugeren indtaster tegn i søgefeltet. Selvfølgelig kan listen vises med en vis forsinkelse, men vi ville ikke ønske, at tegnene i søgefeltet blev indtastet med forsinkelse.

Lad os se, hvordan hook'en useTransition kan hjælpe os i sådanne tilfælde. Antag, at vi har et stykke kode fra hovedkomponenten. Lad os analysere det:

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 variable for useTransition. Variablen isPending indeholder en boolsk værdi og viser om opdateringsprocessen er afsluttet, mens startTransition er en funktion, som giver mulighed for at nedsætte opdateringens prioritet:

const [isPending, startTransition] = useTransition();

Vi har også tilstanden filterTerm, der gemmer udtrykket indtastet i inputfeltet, og funktionen setFilterTerm for at indstille den:

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

Når der indtastes tegn i inputfeltet, kaldes funktionen updateFilterHandler hver gang, hvor opdatering af filterTerm finder sted. Det er her, vi anvender vores hook useTransition, ved at indpakke indstillingen setFilterTerm i startTransition på følgende måde:

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

På denne måde har vi givet opdateringen af tilstanden filterTerm lav prioritet, og vores inputfelt forbliver responsivt.

Ved hjælp af variablen isPending kan vi visse brugeren, at opdateringen af listen stadig er i gang. Lad os vise denne information under inputfeltet, mens listen opdateres:

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