React တွင် စွမ်းဆောင်ရည် အကောင်းဆုံးချိန်ညှိရန် useMemo Hook

စွမ်းဆောင်ရည် အကောင်းဆုံးချိန်ညှိဖို့ ပထမဆုံး လေ့လာကြည့်မယ့် hook က useMemo ပါ။

ဒီ hook ဟာ စက်ရင့်အရင်းအမြစ်အများကြီးသုံးရတဲ့ လုပ်ဆောင်ချက်တွေရဲ့ ရလဒ်တွေကို စခရင်ပြန်ဆွဲတဲ့ကြားကာလမှာ ယာယီသိမ်းထားဖို့ ကူညီပေးပြီး ဒါကြောင့် မလိုအပ်တဲ့ ထုထည်ကြီးမားတဲ့ တွက်ချက်မှုတွေကို ရှောင်ရှားနိုင်ပါတယ်။ ဒီလို ယာယီသိမ်းဆည်းခြင်းကို မှတ်ဉာဏ်တင်ခြင်း (memoization) လို့လည်း ခေါ်ပါတယ်။

ဒါက ဘယ်လို အလုပ်လုပ်လဲဆိုတာ ကြည့်ရအောင်။ ခလုတ်တစ်ခုနဲ့ h3 ခေါင်းစဉ်ပါတဲ့ component တစ်ခု ဖန်တီးကြည့်ပါမယ်။

App.jsxreturn (
  <div>
    <h3>စာသား</h3>
    <button>နှိပ်ပါ</button>
  </div>
);

အခု ခေါင်းစဉ်ပေါ်ကို နှိပ်လိုက်ရင် သူ့ရဲ့ အရောင်က လိမ္မော်ရောင်ကနေ စိမ်းရောင်ကို ပြောင်းပြီး ပြန်ပြောင်းတာမျိုး လုပ်ကြည့်ရအောင်။ အရင်ဆုံး isGreen state ကို သတ်မှတ်ပါမယ်။

App.jsxconst [isGreen, setIsGreen] = useState(false);

ခေါင်းစဉ်ရဲ့ style attribute ထဲမှာ အရောင်ပြောင်းဖို့ အခြေအနေတစ်ခု ထည့်ပြီး ကလစ်ကို ကိုင်တွယ်ဖို့ တပ်ဆင်ပါမယ်။

App.jsx<h3 onClick={() => setIsGreen(!isGreen)}
  style={{ color: isGreen ? 'green' : 'orangered' }}
>စာသား</h3>

ကျွန်ုပ်တို့ရဲ့ ခလုတ်လေးကို နှိပ်လိုက်ရင် တစ်ခုတိုးသွားမယ့် တန်ဖိုးတစ်ခုလည်း ရှိပါစေ။ ဒါအတွက် state သတ်မှတ်ပါမယ်။

App.jsxconst [num, setNum] = useState(0);

ခလုတ်ကို နှိပ်တာကို ကိုင်တွယ်ဖို့ ထည့်ပါမယ်။

App.jsx<button onClick={() => setNum(num + 1)}>
  နှိပ်ပါ
</button>

num ရဲ့ နှစ်ထပ်ကိန်းကို ပြန်ပေးမယ့် square လို့ခေါ်တဲ့ ဖန်ရှင်တစ်ခုလည်း ရှိပါစေ။ ဖန်ရှင်ခေါ်တဲ့ ရလဒ်ကို result ဆိုတဲ့ variable ထဲမှာ သိမ်းပါမယ်။

App.jsxconst result = square(num);

function square(num) {
  return num * num;
}

result ကို ခလုတ်ရဲ့ စာသားထဲမှာ ပြသပါမယ်။

App.jsx<button onClick={() => setNum(num + 1)}>
  နှိပ်ချက်များ: {result}
</button>

ရလဒ်အနေနဲ့ ကျွန်ုပ်တို့မှာ အောက်ပါအတိုင်း ရှိလာပါတယ်။ ခလုတ်ကို နှိပ်လိုက်ရင် num ရဲ့ တန်ဖိုး ပြောင်းသွားပြီး၊ နောက်ပိုင်းမှာ နှစ်ထပ်ကိန်း တက်သွားကာ၊ ခေါင်းစဉ်ကို နှိပ်လိုက်ရင် ခေါင်းစဉ်ရဲ့ အရောင် ပြောင်းသွားပါတယ်။

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

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

App.jsxfunction square(num) {
  let startTime = performance.now();
  
  while (performance.now() - startTime < 500) {
    // ဘာမှ မလုပ်ပါနဲ့ ...
  }
  
  return num * num;
}

အခု ခေါင်းစဉ်ကို နှိပ်ကြည့်ပါ။ ဖြစ်လာတာက အခုဆိုရင် square ဖန်ရှင်ရဲ့ အလုပ်လုပ်ရင် ကြာတာကြောင့် (ခလုတ်ကိုတော့ ကျွန်ုပ်တို့ မထိဘူးနော်) ခေါင်းစဉ်ရဲ့ အရောင်ပြောင်းဖို့ ကျွန်ုပ်တို့ အတော်ကြာ စောင့်နေရပါပြီ။

ဒီမှာပဲ useMemo hook က ကျွန်ုပ်တို့ကို ကူညီဖို့ ရောက်လာပါတယ်။ ဒါအတွက်၊ ပထမ parameter အဖြစ် ကျွန်ုပ်တို့ ယာယီသိမ်းချင်တဲ့ တန်ဖိုးကို တွက်ချက်ပေးမယ့် ဖန်ရှင်တစ်ခုကို ပေးပို့ရမယ်၊ ဒီဖန်ရှင်က သန့်ရှင်းပြီး parameter ဘာမှ မလိုအပ်ပါဘူး။ ဒုတိယ parameter အဖြစ် - ထောင့်ကွင်းစတုဂံထဲမှာ မှီခိုမှုတွေ၊ တစ်နည်းအားဖြင့်၊ ဖန်ရှင်ရဲ့ code ထဲမှာ ပါဝင်နေတဲ့ တုံ့ပြန်မှုရှိတဲ့ တန်ဖိုးအားလုံးကို ပေးရမယ်။ ဒါကြောင့်၊ result ထဲမှာ အခု ဒီလိုတည်ဆောက်ပုံမျိုး ရေးပါမယ်။

App.jsxconst result = useMemo(() => square(num), [num]);

ခေါင်းစဉ်ကို ထပ်နှိပ်ကြည့်ပါ။ အခု၊ ကျွန်ုပ်တို့က တွက်ချက်မှုတွေနဲ့အတူ ခလုတ်ကို မထိဘူးဆိုရင်၊ ဒီလိုနည်းနဲ့ num state ရဲ့ တန်ဖိုးကို မပြောင်းဘူးဆိုရင်၊ ဘာမှ ပြန်မတွက်တော့ဘူး၊ ပြီးတော့ React က ခလုတ်ထဲမှာ ယာယီသိမ်းထားတဲ့ တန်ဖိုးကို ပြသလိုက်တယ်၊ ဒါကြောင့် ကျွန်ုပ်တို့ရဲ့ ခေါင်းစဉ်က သူ့ရဲ့ အရောင်ကို မြန်မြန်ဆန်ဆန်ပဲ ပြောင်းလိုက်တယ်။