# React memo()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="https://308926783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOuvH8TxepDajmoy3tPq%2Fuploads%2Fiq1k9kqI0qZjAaGcKOKI%2Fimage.png?alt=media&#x26;token=c4411da4-3273-4fc8-8065-a3bfad90c44b" alt=""><figcaption><p>Parent Component</p></figcaption></figure>

<figure><img src="https://308926783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOuvH8TxepDajmoy3tPq%2Fuploads%2F0SqPasNi6t8YGTnG1I2H%2Fimage.png?alt=media&#x26;token=b56009bc-33cd-4af7-ba69-8860e39cde93" alt=""><figcaption><p>memo component</p></figcaption></figure>

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

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

<figure><img src="https://308926783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOuvH8TxepDajmoy3tPq%2Fuploads%2FDyyLdYwtGcHR8O422hhT%2Fimage.png?alt=media&#x26;token=e44266dd-618b-4b0e-ac68-ab605d1c6626" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://308926783-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeOuvH8TxepDajmoy3tPq%2Fuploads%2Fw0JeMxqGZ5nal1vtNYQ5%2Fimage.png?alt=media&#x26;token=35b09c67-cbf8-424f-a3ed-df4343b3f96e" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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