React හි useDeferredValue කාර්ය සාධන ප්‍රශස්තකරණ කොකුව

useDeferredValue ප්‍රශස්තකරණ කොකුව, useTransition මෙන්, ග්‍රැෆික් අතුරු මුහුණතේ වේගය ඉහළ නැංවීමට උපකාර කරයි, නමුත් එය සැලකිය යුතු තරම් වෙනස් ආකාරයකින් ක්‍රියා කරයි.

කරුණාකර පෙර පාඩම බලන්න, එහිදී useTransition සමඟ අපි setFilterTerm යාවත්කාලීන කිරීමේ ශ්‍රිතය ආවරණය කළේ කෙසේදැයි. එසේ නම්, තත්වය යාවත්කාලීන කරන කේතය සැමවිටම ලබා ගත හැකි නොවේ. එය සැඟවී තිබිය හැකිය, උදාහරණයක් ලෙස, ඔබ සම්බන්ධ කර ඇති පුස්තකාලයක. එවැනි අවස්ථාවක, අපට useDeferredValue කොකුව භාවිතා කළ හැකිය. එවිට අපට අවශ්‍ය වන්නේ තත්වයම හෝ එම තත්වය භාවිතා කර ගණනය කරන ප්‍රතිඵලය ආවරණය කිරීමෙන්, එහි ප්‍රමුඛත්වය අඩු කිරීමයි.

ProductList දරු සංරචකයේ පහත කේත කොටස විශ්ලේෂණය කරමු:

import {useDeferredValue} from 'react'

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

මෙහිදී අපි useDeferredValue භාවිතා කර සංරචකයේ ප්‍රොප්ස් වලින් ලබාගත් products විචල්‍යයම ආවරණය කළ බව සලකන්න. පසුව අපි ප්‍රතිඵලය deferredProducts ලෙස ලියා ගත් අතර, පසුව කටයුතු කිරීමට යනවා:

const deferredProducts = useDeferredValue(products);

දැන්, පෙර පාඩමේදී අපි සලකා බැලූ ප්‍රධාන සංරචකයේ කේත කොටසෙහි, මෙම පේළිය ඉවත් කරන්නේ නම්:

const [isPending, startTransition] = useTransition();

සහ isPending භාවිතා කරන පේළිය:

{isPending && <p>යාවත්කාලීන කරමින් ...</p>}

සහ setFilterTerm ශ්‍රිතයෙන් ආවරණය ඉවත් කරන්නේ නම්, අපට පෙර පාඩමේදී ලැබුණු ප්‍රතිඵලයම ලැබේ:

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