Suorituskyvyn optimointihook useTransition Reactissa

Suorituskyvyn optimointihook useTransition mahdollistaa tilapäivitykset estämättä käyttöliittymää.

Tämän hookin avulla voimme asettaa jonkin tilan päivitykselle matalan prioriteetin, mikä antaa muiden tilojen päivityksille korkean prioriteetin ja ne suoritetaan viiveettä.

Esimerkkinä voidaan mainita tuotelistassa olevan pudotusvalikon suodatus, kun käyttäjä kirjoittaa hakusanaan merkkejä. Lista voi tietysti näkyä jonkin viiveen kanssa, mutta emme haluaisi, että merkit syötetään hakukenttään viiveellä.

Katsotaan, kuinka hook useTransition voi auttaa meitä tällaisissa tapauksissa. Oletetaan, että meillä on koodinpätkä pääkomponentista. Analysoidaanpa sitä:

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

Tässä näemme kaksi muuttujaa useTransition:lle. Muuttuja isPending sisältää loogisen arvon ja näyttää onko päivitysprosessi valmis, ja startTransition on funktio, joka mahdollistaa päivityksen prioriteetin alentamisen:

const [isPending, startTransition] = useTransition();

Meillä on myös tila filterTerm, jossa tallennetaan hakukenttään kirjoitettu lauseke ja funktio setFilterTerm sen asettamiseksi:

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

Kun syötät merkkejä hakukenttään, funktiota updateFilterHandler kutsutaan joka kerta, ja siinä päivitetään filterTerm. Tässä kohtaa käytämme hookkia useTransition, käärimällä asetusfunktion setFilterTerm startTransition:iin seuraavasti:

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

Näin olemme asettaneet tilan filterTerm päivitykselle matalan prioriteetin ja hakukenttämme pysyy reagoivana.

Muuttujan isPending avulla voimme näyttää käyttäjälle, että listan päivitys on vielä käynnissä. Näytetään tämä tieto hakukentän alla, kun listaa päivitetään:

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