Kifungo cha Uboreshaji wa Utendaji useDeferredValue katika React

Kifungo cha uboreshaji wa utendaji useDeferredValue, pia kama vile useTransition, husaidia kuharakisha kazi ya kiolesura cha grafu, lakini hufanya hivyo kwa njia tofauti kidogo.

Angalia somo lilopita somo na uone jinsi katika kesi ya useTransition tulivyozunguka chaguo-kukosea la kusasisha setFilterTerm. Kweli, msimbo wa kusasisha hali hauwezi kuwa pato kila mara. Huenda ulifichwa, kwa mfano, katika maktaba uliyoiiunganisha. Katika kesi hii tunaweza kutumia kifungo cha useDeferredValue. Wakati huo tunahitaji kuzunguka ama hali yenyewe, au matokeo, yaliyohesabiwa kwa kutumia hali hiyo, na hivyo kupunguza kipaumbele chake.

Wacha tuchambue kipande kifuatacho cha msimbo wa kijenzi kinachoitwa ProductList:

import {useDeferredValue} from 'react'

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

Kumbuka kuwa hapa tulizunguka kwenye useDeferredValue mabadiliko yenyewe products, ambayo tulichukua kutoka kwenye sifa za kijenzi. Kisha tuliandika matokeo kwenye deferredProducts, ambayo tutakayofanya kazi nayo zaidi:

const deferredProducts = useDeferredValue(products);

Sasa, ikiwa katika kipande cha msimbo wa kijenzi kuu, ambacho tulichambua kwenye somo lilopita, tuondoe mstari:

const [isPending, startTransition] = useTransition();

Na mstari na matumizi ya isPending:

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

Na pia kuondoa kifuniko kutoka kwenye chaguo-kukosea setFilterTerm, basi tutapata matokeo sawa na yale ya somo lilopita:

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