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

useTransition කාර්ය සාධන ප්‍රශස්තකරණ කොක්ක අපට GUI අවහිර නොකරමින් state යාවත්කාලීන කිරීමට ඉඩ සලසයි.

මෙම කොක්ක භාවිතා කරමින්, අපට යම් state යාවත්කාලීනයක් අවප්‍රමාණ ප්‍රමුඛතාවයකින් සැකසිය හැකිය. මෙය වෙනත් state යාවත්කාලීනවලට ඉහළ ප්‍රමුඛතාවයක් ලබා දී විලම්බයකින් තොරව ක්‍රියාත්මක වීමට ඉඩ සලසයි.

උදාහරණයක් ලෙස, පරිශීලකයා සෙවුම් ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කරන විට නිෂ්පාදන ඩ්‍රොප්-ඩවුන් ලැයිස්තුවක් පෙරීම හැඳින්විය හැකිය. ඇත්ත වශයෙන්ම, ලැයිස්තුවම යම් විලම්බයකින් පෙන්විය හැකිය, නමුත් අපට අවශ්‍ය නැති දෙය නම් සෙවුම් ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කිරීමේදී විලම්බයක් ඇතිවීමයි.

useTransition කොක්ක එවැනි අවස්ථාවන්හිදී අපට උපකාර කළ හැක්කේ කෙසේදැයි අපි බලමු. අපගේ ප්‍රධාන සංරචකයේ කේත කොටසක් ඇතැයි සිතමු. අපි එය විශ්ලේෂණය කරමු:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

මෙහිදී අපි useTransition සඳහා විචල්‍ය දෙකක් දකිමු. isPending විචල්‍යය බූලියන් අගයක් අඩංගු කර ඇති අතර එය යාවත්කාලීන ක්‍රියාවලිය අවසන් කර ඇත්දැයි පෙන්වයි. startTransition ශ්‍රිතය යාවත්කාලීනයේ ප්‍රමුඛතාවය අඩු කිරීමට ඉඩ සලසයි:

const [isPending, startTransition] = useTransition();

අපට තවද filterTerm state එකක් ඇත, එය ආදාන ක්ෂේත්‍රයට ඇතුළත් කරන ලද ප්‍රකාශනය ගබඩා කරයි. එය සැකසීම සඳහා setFilterTerm ශ්‍රිතයද ඇත:

const [filterTerm, setFilterTerm] = useState('');

ආදාන ක්ෂේත්‍රයට අක්ෂර ඇතුළත් කරන විට, අපගේ updateFilterHandler ශ්‍රිතය සෑම අවස්ථාවකම ක්‍රියා කරයි. එහිදී filterTerm යාවත්කාලීන වේ. මෙය තුළදීයි අපි අපගේ useTransition කොක්ක යොදා ගන්නේ, setFilterTerm සැකසුම් ශ්‍රිතය startTransition තුළට ඇතුළත් කරමින් පහත පරිදි:

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

මේ ආකාරයෙන්, අපි filterTerm state යාවත්කාලීනය සඳහා අවප්‍රමාණ ප්‍රමුඛතාවයක් සැකසූ අතර, අපගේ ආදාන ක්ෂේත්‍රය ප්‍රතිචාර දක්වන ලෙස පවතී.

isPending විචල්‍යය භාවිතා කරමින්, අපට පරිශීලකයාට ලැයිස්තු යාවත්කාලීනය තවමත් සිදු වෙමින් පවතින බව පෙන්විය හැකිය. ලැයිස්තුව යාවත්කාලීන වන අතරතුර මෙම තොරතුරු ආදාන ක්ෂේත්‍රයට පහළින් ප්‍රදර්ශනය කරමු:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>යාවත්කාලීන වෙමින් ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);