React တွင် API memo ကိုအသုံးပြုခြင်း

နောက် hook တစ်ခုကို မစဉ်းစားခင်၊ component ၏ props များမပြောင်းလဲပါက ထပ်ခါထပ်ခါ render လုပ်ခြင်းမှ ရှောင်ရှားရန် ကူညီပေးသည့် အသုံးဝင်သော API memo ကို ဖော်ပြရန်လိုအပ်ပါသည်။

ဥပမာတစ်ခုဖြင့် စမ်းကြည့်ကြပါစို့။ App component တစ်ခုကို ဖန်တီးမည်၊ ထို component တွင် input နှစ်ခုပါဝင်မည်၊ ၎င်းတို့ထဲတွင် အမည်နှင့် မိသားစုအမည်ကို ရိုက်ထည့်သည်ဟု ယူဆပါစို့။

return (
	<div>
		<label>
			နာမည်:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			မိသားစုအမည်:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Component ၏အစတွင် ၎င်းတို့အတွက် state များကို ထည့်သွင်းပါမည်။

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

ထို့အပြင် ခေါ်ယူသုံးစွဲမည့် component Child.js ကိုလည်း ဖန်တီးကြည့်ပါမည်၊ ၎င်းက နှုတ်ခွန်းဆက်စကားကို ပြသပါစေ၊ ထိုနှုတ်ခွန်းဆက်စကားတွင် ရိုက်ထည့်သော အမည်ကို ဖော်ပြပါမည်။ ထို့အပြင် ဤ component render လုပ်သည့်အခါတိုင်း console တွင် စာသား 'child render' ကို ထုတ်ပြပါမည်။

function Child({ name }) {
	console.log('child render');
	return <h3>မင်္ဂလာပါ {name}!</h3>;
}

Child ကို အဓိက component ၏ ဖွဲ့စည်းပုံတွင် နောက်ဆုံး input ၏ နောက်မှ ထည့်သွင်းပါမည် ထို့အပြင် props အဖြစ် အမည်ကို လွှဲပေးပါမည်။

<Child name={name} />

၎င်းကို အဓိက component ထဲသို့ တင်သွင်းပါမည်။

import Child from './Child';

ယခု console ကိုဖွင့်ပြီး input အကွက်များထဲတွင် အမည်နှင့် မိသားစုအမည်ကို ရိုက်ထည့်ကြည့်ပါ။ ဤနေရာတွင် မိသားစုအမည်အတွက် အကွက်ထဲသို့ စာလုံးများ ရိုက်ထည့်သည့်အချိန်တိုင်းတွင် ကျွန်ုပ်တို့၏ ခေါ်ယူသုံးစွဲသည့် component သည် အကြိမ်တိုင်း ပြန်လည်ရေးဆွဲခံရမည်ကို တွေ့ရပါမည်။ ပြဿနာမရှိပါ၊ အဘယ့်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့တွင် component သေးသေးလေးရှိသောကြောင့်ဖြစ်သည်။ သို့သော် ဤ component သည် ဒေတာအများအပြားကို ပြသပြီး ထိုအချိန်တိုင်းတွင် ပြန်လည်ရေးဆွဲခံရမည်ဆိုလျှင် မည်သို့ဖြစ်မည်ကို စဉ်းစားကြည့်ပါ။

ယခု ခေါ်ယူသုံးစွဲသည့် component ကို memo ဖြင့် ထည့်သွင်းလိုက်ပြီး၊ render လုပ်ပုံ မည်သို့ပြောင်းလဲသွားသည်ကို ကြည့်ကြပါစို့။ ပထမဦးစွာ ၎င်းထဲသို့ memo ကို တင်သွင်းပါမည်။

import { memo } from 'react';

ထို့နောက် variable အသစ်တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့၏ Child ကို memo ဖြင့် ထည့်သွင်းထားသောအရာကို တန်ဖိုးသတ်မှတ်ပေးပါမည်။ ကျွန်ုပ်တို့၏ ရလဒ်မှာ အောက်ပါ function expression ဖြစ်လာပါမည်။

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>မင်္ဂလာပါ {name}!</h3>;
});

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

ဤအရာသည် အလုပ်မလုပ်ပါ၊ အကယ်၍ props များမပြောင်းလဲသော်လည်း component မှအသုံးပြုသော state များ သို့မဟုတ် ပြောင်းလဲမှုများကိုအသုံးပြုသော context များ ပြောင်းလဲနေပါက မှတ်သားထားရန်လိုအပ်ပါသည်။

�သင်ခန်းစာတွင် ကျွန်ုပ်တို့ပြုလုပ်ခဲ့သော App component ၏ code ကိုယူပါ၊ ၎င်းတွင် ပထမ input တစ်ခုတည်းကိုသာ ချန်ထားပါ။ React component Text ကိုဖန်တီးပါ၊ ထို component တွင် စာသား 'ရှည်လျားသောစာသား' ပါသည့် စာပိုဒ်တစ်ခုပါဝင်ပြီး၊ ၎င်းကို App တွင် input ၏နောက်မှ ထားပါ။

Text component တွင် console.log('text render'); စာကြောင်းကို ထည့်သွင်းပါ။ Input ထဲသို့ စာလုံးများရိုက်ထည့်သည့်အခါ Text component သည် အကြိမ်တိုင်း ပြန်လည်ရေးဆွဲခံရကြောင်း သေချာပါစေ။

ယခု Text component ကို memo ဖြင့် ထည့်သွင်းပါ။ Input ထဲသို့ စာလုံးများရိုက်ထည့်သည့်အခါ Text component သည် ထပ်ခါထပ်ခါ ပြန်လည်ရေးဆွဲခြင်းမခံရတော့ကြောင်း သေချာပါစေ။