🌟React memo()

Not Hook but useful in react

ကျတော်တို့ Hook မဟုတ်ပဲနဲ့ အသုံးများတဲ့ ဟာလေးတစ်ခုရှိပါတယ် အဲဒါက react memo ဆိုတာလေးပါပဲ

သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ ကျတော်တို့ နောက်ပိုင်း react application တွေရေးလာကြတဲ့အခါမှာ performance အပိုင်းနဲ့ပတ်သက်ပြီးတော့ နည်းနည်းလေး ကတောက်ကဆ ဖြစ်ကြတာရှိကြပါတယ်

ဘာလို့ဆိုတော့ react က state တွေ changes ဖြစ်သွားတဲ့အခါတိုင်းမှာ သူ့ရဲ့ component တွေကို re-render

လုပ်ပေးပါတယ်

ဥပမာပြောရရင် ကျတော်တို့မှာ listing application တစ်ခုရှိပါတယ်ဆိုပါစို့

အဲဒီအထဲမှာကျတော်တို့က list တွေ က အများကြီးရှိတဲ့အခါမှာ ကျတော်တို့က တခုခုကိုထပ် ပြီးတော့ add ဖို့လုပ်ကြတဲ့အခါမှာ ကျတော်တို့က state အသုံးပြုပြီးတော့ input မှာစာတွေရိုက်တဲ့အခါ အောက်က list ကြီးကိုပါ တခါတည်း re-render လုပ်နေပါလိမ့်မယ်

list count ( အရေအတွက် ) ကနည်းနေ ရင်ကိစ္စမရှိ ပေမယ့် အရမ်းများလာတဲ့အခါကျရင် ကျတော်တို့ စာတလုံး ကို

ရိုက်လိုက်တာနဲ့ကို listing ကြီးတစ်ခုလုံးကို re-render လုပ်နေတာဖြစ်တဲ့အတွက် performance အရမကောင်းဖြစ်

လာပါလိမ့်မယ်

အလွယ်ပြောရရင် site ကြီးက လေးကန် လာတာပေါ့

အဲလိုမျိုးမဖြစ်ရလေအောင် ကျတော်တို့က အသုံးပြုကြတဲ့ အရာတွေရှိပါတယ်

အခု ပြောပြမယ့် react memo ဆိုတာလေးကလည်း ဒီသဘောတရားထဲမှာ ပါပါတယ်

သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ သူက function component တခုလုံးကို မှတ်ထားပြီးတော့

သူမှတ်ထားတဲ့ component ထဲမှာပြောင်းလဲမှုတခုမှမရှိ ဘူးဆိုရင် သူက အဲဒါကို re-render မလုပ်ပေးသွားပါဘူး

ဒီလောက်ဆိုရင်တော့နားလည်မယ်ထင်ပါတယ်

ဒါဆို ကျတော်တို့ ကုဒ်လိုက်ကြရအောင်

အရင်ဆုံး ကျတော်တို့ parent component နဲ့ memo component ကို ဒီလိုလေးရေးလိုက်ပါမယ်

Parent Component

memo component

ကျတော်တို့ ဒီလိုလေးရေးပြီးတဲ့အခါမှာ ကျတော်တို့ browser မှာ သွားပြီးတော့ စမ်းကြည့်လိုက်ရအောင်

အရင်ဆုံး ကျတော်တို့ name ကို ထည့်တဲ့အခါမှာ component ၂ခုလုံးက render လုပ်သွားတာကိုမြင်ရပါလိမ့်မယ်

ကျတော်တို့ console ကို clear လုပ်ပြီးတော့ age ကို ထည့်ကြည့်တဲ့အခါ parent component တခုတည်းပဲ

re-render လုပ်သွားတာကိုမြင်ရပါလိမ့်မယ်

ဒီလောက်ဆိုရင် ကျတော်တို့ရဲ့ react ရဲ့ memo ဆိုတဲ့ function ( method ) လေးကို နားလည်သွားမယ်လို့ထင်ပါတယ်

ဒါဆိုရင်ကျတော်တို့က component တိုင်းကို memo နဲ့လုပ်လိုက်မယ်ဆိုရင်ရော အဆင်မပြေဘူးလားလို့မေးစရာရှိ

လာပါလိမ့်မယ်

အဆင်တော့မပြေလောက်ပါဘူးဘာလို့ဆိုတော ကျတော်တို့ရေးလိုက်တဲ့ application တစ်ခုက ပြောင်းလဲမှု မရှိဘူး

ဆိုရင် portfolio တို့လိုမျိုး static site သာသာပဲဖြစ်သွားပါလိမ့်မယ်

ပြောချင်တာက ကျတော်တို့ မလိုအပ်ဘဲနဲ့ re-render component တွေ ခနခန ဖြစ်တဲ့အခါတွေမှာ ပဲ

အသုံးပြုပေးတာက ပိုအဆင်ပြေပါလိမ့်မယ်

ကျတော်တို့က memo ကို ဘာကြောင့်အသုံးပြုရတာလည်းဆိုတော့ javascript ကြောင့်လို့ပဲပြောပါရစေ

ကျတော်တို့ ရဲ့ javascript က Object == Object ဆိုရင် false ပြန်သလို function == function ဆိုရင်လည်း

false ပဲ ပြပါလိမ့်မယ် အဲအတွက်ကြောင့် function တစ်ခုလုံးကို မှတ်ထားပေးနိုင်မယ့် memo ဆိုတာလေးကိုအသုံးပြု

ဖို့အတွက် ထွက်လာတာပါ

ဘာလို့ဆိုတော့ react ရဲ့ component တွေက functional base ဖြစ်တဲ့အတွက်ကြောင့်ပါ

ဒီလောက်ဆိုရင်တော့ react memo အကြောင်းလေးကို နားလည်သွားမယ်လို့ထင်ပါတယ်