Jõudluse optimeerimise hook useTransition Reactis

Jõudluse optimeerimise hook useTransition võimaldab meil uuendada state'ilisi väärtusi ilma kasutajaliidest blokeerimata.

Selle hooki abil saame määrata mõne state'i uuendusele madalama prioriteedi, mis võimaldab teiste state'ide uuendustel omada kõrget prioriteeti ja toimuda viivitusteta.

Näitena võib tuua toodete rippmenüü filtreerimise kasutaja poolt otsinguväljale sümbolite sisestamisel. Loomulikult võib nimekiri kuvada mõne viivitusega, kuid me ei soovi, et sümbolid sisestataks otsinguväljale viivitusega.

Vaatame, kuidas sellistel juhtudel saab meid aidata hook useTransition. Oletame, et meil on põhikomponendi kooditükk. Analüüsime seda:

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

Siin näeme kahte muutujat useTransition jaoks. Muutuja isPending sisaldab Boole'i väärtust ja näitab, kas uuendusprotsess on lõpetatud, ja startTransition on funktsioon, mis võimaldab uuenduse prioriteeti alandada:

const [isPending, startTransition] = useTransition();

Meil on ka state filterTerm, mis salvestab sisestusväljale sisestatud avaldise ja funktsioon setFilterTerm selle määramiseks:

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

Sümbolite sisestamisel sisendväljale kutsutakse iga kord välja funktsiooni updateFilterHandler, kus toimub filterTerm uuendamine. Just siin rakendame me oma hooki useTransition, mähkides state'i muutmise funktsiooni setFilterTerm startTransition sisse järgmiselt:

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

Nii seadsime me state'i filterTerm uuendusele madala prioriteedi ja meie sisestusväli jääb vastuvõtlikuks.

Muutuja isPending abil saame näidata kasutajale, et nimekirja uuendamine on veel pooleli. Kuvame selle teabe sisestusvälja all, kuni nimekiri uuendub:

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