React တွင် useCallback အသုံးပြု၍ စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ခြင်း

ဤသင်ခန်းစာတွင် စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ရန် အသုံးပြုသော hook ဖြစ်သည့် useCallback ကို လေ့လာသွားပါမည်။

useCallback hook သည် useMemo API နှင့် ဆင်တူပါသည်။ ကွာခြားချက်မှာ ပထမက အဖန်တလဲလဲ ပုံဆွဲသည့်အကြိမ်ကြားတွင် တန်ဖိုးကို ယာယီသိမ်းဆည်းထားပြီး ဒုတိယကမူ callback ကို ယာယီသိမ်းဆည်းထားခြင်းဖြစ်သည်။ ဤသို့ပြုလုပ်ခြင်းဖြင့် မလိုအပ်သောအခါ ကွန်ပျူတာအရင်းအမြစ်အများအပြားသုံးစွဲရသော လုပ်ဆောင်ချက်များကို ထပ်မံလည်ပတ်စေခြင်းမှ ကာကွယ်နိုင်ပြီး လုပ်ဆောင်ချက်တစ်ခုကို သယ်ဆောင်ခြင်း အား ဆင်းသက် component များသို့ ပြုလုပ်သည့်အခါတွင် အသုံးပြုနိုင်ပါသည်။

ဥပမာတစ်ခုဖြင့် နားလည်အောင် ကြိုးစားကြည့်ပါစို့။ ပထမဦးစွာ component App ကိုဖန်တီးပြီး ၎င်းအတွင်း state num ကို သတ်မှတ်ပါမည်။

const [num, setNum] = useState(0);

ကျွန်ုပ်တို့တွင် button တစ်ခုရှိပါစို့၊ ၎င်းကိုနှိပ်လိုက်သောအခါ num ၏တန်ဖိုးသည် 1 တိုးသွားပြီး၊ num ၏တန်ဖိုးကို ပြသမည့်စာပိုဒ်တစ်ခုလည်းရှိပါစေ။

return (
	<div>
		<button onClick={() => setNum(num + 1)}>နှိပ်ပါ</button>
		<p>နှိပ်သည့်အကြိမ်: {num}</p>
	</div>
);

ယခုအခါ၊ ကျွန်ုပ်တို့၏ App တွင် အခြားခလုတ်တစ်ခုနှိပ်ခြင်းဖြင့် ထပ်မံဖြည့်စွက်သွားမည့် အရာဝတ္ထုများစာရင်းကို ထပ်မံပြသသည်ဟု ယူဆပါစို့။ ဤစာရင်းရှိ အရာဝတ္ထုများကို သိုလှောင်ရန် state items ကို သတ်မှတ်ပါမည်။

const [items, setItems] = useState([]);

ထို့နောက် ၎င်းတို့ကို ထည့်သွင်းရန် addItem လုပ်ဆောင်ချက်ကို ရေးသားပါမည်။

function addItem() {
	setItems([...items, 'အသစ်']);
}

ယခု စာရင်းရှိအရာဝတ္ထုများကို ပြသရန် ကုဒ်ရေးသားပြီး ၎င်းကို ဆင်းသက် component Items သို့ ရွှေ့ပါမည်။ ၎င်းသည် props အဖြစ် အရာဝတ္ထုများစာရင်းနှင့် ၎င်းတို့ထည့်သွင်းရန် လုပ်ဆောင်ချက်ကို လက်ခံရရှိပါမည်။ ကျွန်ုပ်တို့၏ Items သည် မည်သည့်အချိန်တွင် ပြန်လည်ပုံဆွဲသည်ကို မြင်တွေ့နိုင်ရန် console တွင် ပြသခြင်းကို မမေ့ပါနှင့်။

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});

	console.log('Items component ပြန်လည်ပုံဆွဲသည်');

	return (
		<div>
			<h3>ကျွန်ုပ်တို့၏ အရာဝတ္ထုများ</h3>
			{result}
			<button onClick={addItem}>အရာဝတ္ထုထည့်ရန်</button>
		</div>
	);
}

export default Items;

Items ကို component App ၏ နောက်ဆုံးတွင် ထားရှိပြီး အရာဝတ္ထုစာရင်း items နှင့် အရာဝတ္ထုများထည့်သွင်းရန် လုပ်ဆောင်ချက် addItem ကို ၎င်းသို့ ပေးပို့ပါမည်။

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>နှိပ်ပါ</button>
			<p>နှိပ်သည့်အကြိမ်: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

ယခု ခလုတ်များကို နှိပ်ကြည့်ပြီး num တိုးလာခြင်းနှင့် စာရင်းထဲသို့ အရာဝတ္ထုအသစ်များ ထည့်သွင်းခြင်းကို သေချာအောင်လုပ်ပါ။ Console ကိုဖွင့်ကြည့်သောအခါ num ကိုတိုးစေသော ခလုတ်ကို နှိပ်သည့်အချိန်တိုင်း ကျွန်ုပ်တို့၏ စာရင်းသည် ပြန်လည်ပုံဆွဲနေသည်ကို တွေ့ရပါမည်။

ကျွန်ုပ်တို့၏ စာရင်းသည် သေးငယ်ပါက ပြဿနာမရှိပါ၊ သို့သော် ၎င်းသည် ကြီးမားပြီး အခြားအရာများစွာ ပါဝင်မည်ဟု မျှော်လင့်ထားပါက ကော။ စိတ်မပူပါနှင့် - သင်ပြောမည်၊ အဘယ်ကြောင့်ဆိုသော် ယခင်သင်ခန်းစာတွင် မလိုအပ်သော component များ ပြန်လည်ပုံဆွဲခြင်းမှ ရှောင်ရှားရန် API memo ကို လေ့လာခဲ့ပြီးဖြစ်သည်။

ထို့ကြောင့် ကျွန်ုပ်တို့၏ component Items ကို memo ဖြင့် ထုပ်ပိုးလိုက်ပါ။ စကားမစပ်၊ ၎င်းကို Items ကို တင်သွင်းသည့်အခါတွင် တိုက်ရိုက်ပြုလုပ်နိုင်ပါသည်။

export default memo(Items);

memo ကို တင်သွင်းရန် မမေ့ပါနှင့်။

import { memo } from 'react';

ယခု console ကိုဖွင့်ပြီး ခလုတ်များကို နှိပ်ကြည့်ပါ။ အားလုံးအချည်းနှီးဖြစ်သွားသည်။ ကျွန်ုပ်တို့သည် component ကို memoization ပြုလုပ်ခဲ့သော်လည်း 'နှိပ်ပါ' ခလုတ်ကို နှိပ်သည့်အခါတိုင်း component Items သည် ဆက်လက်ပြန်လည်ပုံဆွဲနေပါသည်။

ပြဿနာမှာ မိဘ component သည် ပြန်လည်ပုံဆွဲသောအခါ၊ ၎င်း၏ လုပ်ဆောင်ချက်များသည် အသစ်ပြန်လည်ဖန်တီးခြင်းခံရသည် - ၎င်းတွင် ကျွန်ုပ်တို့ ပေးပို့ထားသော Items အတွင်း လုပ်ဆောင်ချက် addItem လည်း ပါဝင်သည်။

ဤအချိန်တွင်ပင်လျှင် hook useCallback သည် ကျွန်ုပ်တို့အား ကူညီပါလိမ့်မည်။ ၎င်းကို အသုံးပြုကြည့်ပါစို့။ ပထမဦးစွာ ၎င်းကို App အတွင်းသို့ တင်သွင်းပါ။

import { useCallback } from 'react';

ထို့နောက် လုပ်ဆောင်ချက် addItem ၏ ရိုးရှင်းသောကြေညာချက်ကို Function Expression အဖြစ်ပြောင်းလဲပါ၊ useCallback အတွက် ပထမဆုံးသော parameter အဖြစ် callback ပုံစံဖြင့် ကျွန်ုပ်တို့၏လုပ်ဆောင်ချက်ကို သတ်မှတ်ပါ။ ဒုတိယ parameter အဖြစ် ထောင့်ကွင်းစတုဂံအတွင်း တုံ့ပြန်မှုရှိသော variable များကို သတ်မှတ်ပါ။ ကျွန်ုပ်တို့၏ကိစ္စတွင် ၎င်းသည် စာရင်း items ဖြစ်သည်။

const addItem = useCallback(() => {
	setItems(() => [...items, 'အရာဝတ္ထုအသစ်']);
}, [items]);

ပြီးပြီ။ ဤနည်းအားဖြင့် ကျွန်ုပ်တို့သည် လုပ်ဆောင်ချက်ကို ယာယီသိမ်းဆည်းထားခဲ့သည်။ ထပ်မံခလုတ်များကို နှိပ်ကြည့်ပါက ယခု 'နှိပ်ပါ' ခလုတ်ကို နှိပ်သောအခါ ကျွန်ုပ်တို့၏ ဆင်းသက် component သည် ပြန်လည်ပုံမဆွဲတော့ကြောင်း တွေ့ရပါမည်။

Component App ကိုဖန်တီးပါ၊ ၎င်းအတွင်းတွင် စာသားပါသော စာပိုဒ်တစ်ခုထည့်ပါ။ ကနဦးတန်ဖိုး 'စာသား' ဖြင့် state တစ်ခုသတ်မှတ်ပြီး ၎င်းကို စာပိုဒ်အတွင်း ပြသပါ။ စာပိုဒ်ကိုနှိပ်လိုက်သောအခါ ၎င်း၏ နောက်ဆုံးစာသားတွင် အာမေဋိတ်သင်္ကေတ တစ်ခု ထည့်သွင်းပါစေ။

ဆင်းသက် component Products ကိုဖန်တီးပါ၊ ၎င်းတွင် ထုတ်ကုန်အသစ်ထည့်သွင်းရန် ခလုတ်တစ်ခုပါရှိပါစေ။ ၎င်းကို App တွင် ထားရှိပါ။ မိဘ component အတွင်း ထုတ်ကုန်များစာရင်းဖြင့် state တစ်ခုနှင့် ထုတ်ကုန်အသစ်ထည့်သွင်းရန် လုပ်ဆောင်ချက်တစ်ခုကို ဖန်တီးပါ။ ၎င်းတို့ကို props အဖြစ် ဆင်းသက် component သို့ ပေးပို့ပါ၊ ၎င်းအတွင်း ပေးပို့ထားသော စာရင်းကို ul စာရင်းပုံစံဖြင့် ပြသပါ။

Products တွင် စာသား 'products render' ကို console တွင် ပြသပါ။ Products ကို memo ဖြင့် ထုပ်ပိုးပါ။ စာပိုဒ်နှင့် ခလုတ်ကို နှိပ်ကြည့်ပါ။ စာပိုဒ်ကိုနှိပ်သောအခါ ဆင်းသက် component သည် ဆက်လက်ပြန်လည်ပုံဆွဲနေဆဲဖြစ်ကြောင်း သေချာပါစေ။

ထုတ်ကုန်များထည့်သွင်းရန် လုပ်ဆောင်ချက်ကို hook useCallback ဖြင့် ထုပ်ပိုး၍ ယာယီသိမ်းဆည်းပါ။ စာပိုဒ်နှင့် ခလုတ်ကို နှိပ်ကြည့်ပါ။ စာပိုဒ်ကိုနှိပ်သောအခါ ဆင်းသက် component သည် ထပ်မံပြန်လည်ပုံမဆွဲတော့ကြောင်း သေချာပါစေ။