Reacti jõudluse optimeerimise konks useDeferredValue

Jõudluse optimeerimise konks useDeferredValue, samuti nagu useTransition, aitab kiirendada graafilise liidese tööd, kuid teeb seda veidi teistmoodi.

Heitke pilk eelmisele õppetükile ja vaadake, kuidas useTransition puhul me mähkisime uuendusfunktsiooni setFilterTerm. Nii et, oleku uuendamise kood ei pruugi alati olla kättesaadav. See võib olla peidetud, näiteks teegis, mille olete ühendanud. Sel juhul saame kasutada konksu useDeferredValue. Siis peame mähkima kas oleku enda või tulemuse, mis arvutatakse selle oleku abil, seeläbi alandades selle prioriteeti.

Analüüsime järgmist tükkikoodi lapsekomponendi ProductList puhul:

import {useDeferredValue} from 'react'

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

Pange tähele, et siin me mähkisime useDeferredValue-sse muutuja products enda, mille me võtsime komponendi propsitest. Seejärel kirjutasime tulemuse deferredProducts-i, millega ja edasi töötame:

const deferredProducts = useDeferredValue(products);

Nüüd, kui põhikomponendi kooditükis, mida me vaatlesime eelmisel õppetükil, eemaldada rida:

const [isPending, startTransition] = useTransition();

Ja rida isPending kasutamisega:

{isPending && <p>uuendamine ...</p>}

Ja eemaldada mähis funktsiooni setFilterTerm ümbert, siis saame sama tulemuse, mis eelmisel õppetükil:

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