Suorituskyvyn optimointihook useDeferredValue Reactissa

Suorituskyvyn optimointihook useDeferredValue, aivan kuten useTransitionkin, auttaa nopeuttamaan graafisen käyttöliittymän toimintaa, mutta tekee sen hieman eri tavalla.

Katsokaa edellistä oppituntia ja katsokaa, kuinka useTransition:n tapauksessa käärimme setFilterTerm päivitysfunktion. No, tilan päivityskoodi ei aina ole saatavilla. Se voi olla piilotettu, esimerkiksi käyttämässäsi kirjastossa. Tässä tapauksessa voimme hyödyntää useDeferredValue -hookkia. Silloin meidän täytyy kääriä joko itse tila tai tällä tilalla laskettu tulos, alentaen sen prioriteettia.

Analysoidaan seuraavaa lasten komponentin ProductList koodinpätkää:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Huomaa, että tässä käärimme useDeferredValue:llä itse products -muuttujan, jonka saimme komponentin propsista. Sitten tallensimme tuloksen muuttujaan deferredProducts, joka on se, jota käytämme eteenpäin:

const deferredProducts = useDeferredValue(products);

Jos nyt pääkomponentin koodinpätkässä, jota tarkastelimme edellisellä oppitunnilla, poistamme rivin:

const [isPending, startTransition] = useTransition();

Ja rivin, jossa käytetään isPending:ia:

{isPending && <p>päivitetään ...</p>}

Ja poistamme kääreen funktion setFilterTerm ympäriltä, saamme saman tuloksen kuin edellisellä oppitunnilla:

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