React ရဲ့ memorization ပြဿနာဆိုတာဘာလဲ

React ရဲ့ memorization ပြဿနာဆိုတာဘာလဲ။

useCallback နဲ့ useMemo က ဘယ်လို ကွာခြားကြတာလဲ။

React ရဲ့ core idea အရ UI တွေကို data (တနည်းအားဖြင့် state)တွေက ပြဌာန်းသတ်မှတ်ပါတယ်။ ဒီတော့ application ရဲ့ state လေးတခု ပြောင်းလဲသွားတာနဲ့ react ဟာ UI function ကြီးတခုလုံးကို တဖန်ပြန်ပြီး render လုပ်ရပါတယ်။ ဒီဖြစ်စဥ်ဟာ react ရဲ့ အခြေခံအကျဆုံး သဘောတရားတခုပါ။ သို့ပေ့မယ် တခါတရံမှာ render လုပ်ရတဲ့ အကြိမ်အရေအတွက်ဟာ တကြိမ်ထက်ပိုပြီး လုပ်ဆောင်ရတဲ့ အခြေအနေတွေ ရှိလာပါတယ်။ ဒီလို အခြေအနေမျိုးမှာ function တခုလုံးကို ထပ်ခါထပ်ခါ render လုပ်ရတဲ့အတွက် performance issue တွေကို ထည့်သွင်းစဉ်းစားလာရပါတော့တယ်။ React ရဲ့ ထပ်ခါထပ်ခါ rendering ပြန်လုပ်တဲ့ behavior ကို optimize လုပ်နိုင်မယ့် ယေဘုယျ အကျဆုံး နည်းလမ်းကတော့ unnecessary work တွေကို re-render ပြန်လုပ်တဲ့အချိန်မှာ ချန်ထားခဲ့ဖို့ပါ။ ဥပမာ၊ render process တခုစီတိုင်းအတွက် မူလ အခြေအနေ မပြောင်းမလဲရှိနေတဲ့ variable တန်ဖိုးတွေ၊ complex business logic တွေကို တဖန်ပြန်ပြီး calculate မလုပ်တော့ပဲ cached မှတ်တာ တနည်းအားဖြင့် memorized လုပ်ထားလိုက်တာမျိုးတွေပါ။

ဆိုတော့ မလိုအပ်တဲ့ re-render အခြေအနေတွေနဲ့ complex calculation တွေကို skip လုပ်ဖို့အတွက် useMemo နဲ့ useCallback ဆိုတဲ့ performance optimizing hook နှစ်ခုကို အသုံးပြုရပါတယ်။ နှစ်ခုဟာ တူသယောင်ထင်ရပေမယ့် တကယ်တမ်းတော့ လုပ်ဆောင်ပုံ အနည်းနည်း ကွဲပြားခြားနားပါတယ်။

React ရဲ့ သဘောတရားအရ component တခု render လုပ်တဲ့အခါ သူရဲ့ children component တွေကိုလည်း အဆင့်ဆင့်ပြန်ပြီး render လုပ်ပါတယ်။ ဆိုတော့ children component တွေရဲ့ သက်ဆိုင်ရာ prop တွေ မပြောင်းမလဲမချင်း မလိုအပ်ဘဲ render လုပ်တာကို ကာကွယ်နိုင်ဖို့အတွက် React.memo ကို ထပ်အုပ်ပြီး သုံးလို့ရပါတယ်။ React.memo ဟာ performance optimizing လုပ်ပေးတဲ့ HOC (higher order component) တခုဖြစ်ပါတယ်။ သို့ပေ့မယ် ချွင်းချက်အနေနဲ့ကတော့ children component တွေရဲ့ prop တွေဟာ callback function တွေကို လက်ခံလို့မရပါဘူး။ ဒါဟာ JavaScript ရဲ့ referential equality လို့ခေါ်တဲ့ သဘောတရားကြောင့်ဖြစ်ပါတယ်။ JS ရဲ့ မတူညီတဲ့ object reference နှစ်ခုကို ဘယ်နည်းလမ်းနဲ့ comparison လုပ်ပါစေ false ကိုသာ ရရှိပါတယ်။ JS ရဲ့ function ဆိုတာကလည်း object တွေသာဖြစ်ပါတယ်။

"Two distinct objects are never equal for either strict or abstract comparisons"

ဆိုတော့ parent component က render တခါလုပ်တိုင်းမှာ အဆိုပါ callback function တွေဟာ ထပ်ခါထပ်ခါပြန်ပြီး re-created လုပ်နေမှာဖြစ်ပါတယ်။ အဲဒီလို အသစ်တဖန် re-created ပြန်လုပ်လိုက်တာဟာ callback functions တွေရဲ့ နဂို reference object ကနေသွေဖယ်သွားစေပြီး အသစ်တခုကိုဖြစ်စေပါတယ်။ ဒီတော့ အဆိုပါ callback function တွေကို prop အနေနဲ့ လက်ခံထားတဲ့ children component တွေဟာလည်း နောက်တခါ ပြန်ပြီး render ပြန်လုပ်သွားပါတယ်။ ဒီလိုအခြေအနေမျိုးမှာ callback function တွေကို memorize လုပ်ထားနိုင်ဖို့ useCallback hook ကို အသုံးပြုရပါတယ်။

useCallback ဟာ function တွေကို render တခုစီကြား memorized လုပ်ထားပေးနိုင်တဲ့ hook တခုပါ။ parameter နှစ်ခု ထည့်ပေးဖို့လိုပါတယ်။ ပထမတခုက memorized မှတ်ထားချင်တဲ့ callback function ဖြစ်ပြီး၊ ဒုတိယတစ်ခုကတော့ dependencies array တခုဖြစ်ပါတယ်။ Dependencies array ဆိုတာ memorized မှတ်ထားတဲ့ function ကို တစ်ဖန်ပြန်ပြီး calculate လုပ်ဖို့ ဆုံးဖြတ်ပေးမယ့် dependency တန်ဖိုးတွေဖြစ်ပါတယ်။ အဆိုပါ dependencies array ထဲက တန်ဖိုးတခုခု ပြောင်းလဲသွားတာနဲ့ memorized မှတ်ထားတဲ့ function ကို re-created ပြန်လုပ်ပေးမှာပဲဖြစ်ပါတယ်။

useMemo ကတော့ calculated result တွေကို render တခုစီကြား memorized လုပ်ထားပေးနိုင်တဲ့ hook တခုဖြစ်ပါတယ်။ useMemo မှာ parameter နှစ်ခု ထည့်ပေးဖို့လိုပါတယ်။ ပထမတခုက memorized မှတ်ထားချင်တဲ့ တန်ဖိုးကို တွက်ချက်ပေးမယ့် function ဖြစ်ပြီး၊ ဒုတိယတစ်ခုကတော့ dependencies array ဖြစ်ပါတယ်။

ဒီ hook နှစ်ခုရဲ့ ခြားနားချက်ကတော့ useCallback ဟာ uncalled function တစ်ခုကို return ပြန်ပေး (memorized လုပ်ပေး)မှာဖြစ်ပြီး အဆိုပါ function ကို တချိန်ချိန်မှာ ပြန်ခေါ်ပြီး အသုံးပြုနိုင်မှာဖြစ်ပါတယ်။ useMemo ကတော့ သူ့ထဲဝင်လာတဲ့ function ကနေတဆင့် တွက်ထုတ်ပေးလိုက်တဲ့ တန်ဖိုးကိုသာ return ပြန်ပေး (memorized လုပ်ပေး)မှာပဲဖြစ်ပါတယ်။

#CodewithThura #programming