Huku i Optimizimit të Performancës useDeferredValue në React

Huku i optimizimit të performancës useDeferredValue, njëlloj si useTransition, ndihmon për të përshpejtuar punën e ndërfaqes grafike, por e bën këtë pak më ndryshe.

Hidhni një sy mësimit të kaluar mësimit dhe shikoni se si në rastin me useTransition ne e mbështjellim funksionin e përditësimit setFilterTerm. E pra, kodi i përditësimit të state-it nuk mund të jetë gjithmonë i disponueshëm. Ai mund të jetë i fshehur, për shembull, në një bibliotekë, që keni lidhur. Në këtë rast ne mund të përdorim hukun useDeferredValue. Atëherë na duhet të mbështjellim ose state-in vetë, ose rezultatin, që llogaritet me ndihmën e këtij state-i, duke ulur kështu prioritetin e tij.

Le të analizojmë fragmentin e mëposhtëm të kodit të komponentit të fëmijës ProductList:

import {useDeferredValue} from 'react'

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

Vini re se këtu kemi mbështjellë në useDeferredValue vetë variablin products, të cilin e kemi marrë nga propet e komponentit. Pastaj kemi shkruar rezultatin në deferredProducts, me të cilin do të punojmë më tej:

const deferredProducts = useDeferredValue(products);

Tani, nëse në fragmentin e kodit të komponentit kryesor, të cilin e kemi shqyrtuar në mësimin e kaluar, heqim rreshtin:

const [isPending, startTransition] = useTransition();

Dhe rreshtin me përdorimin e isPending:

{isPending && <p>duke u përditësuar ...</p>}

Dhe gjithashtu të heqim mbështjelljen nga funksioni setFilterTerm, atëherë do të marrim të njëjtin rezultat si në mësimin e kaluar:

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