useMemo Hook

React Hook

ကျတော်တို့ ဒီတစ်ခါ လေ့လာကြမှာက useMemo ဆိုတဲ့ component computation re-render skipable Hook

လေးပါပဲ eng လို ပြောလိုက်တာ နည်းနည်းလေးတော့ ထူးဆန်းမယ်လို့ထင်ပါတယ်

သူက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ ကျတော်တို့ component တစ်ခုနဲ့တခုကြားမှာ large amount

computation တွေကို သူက တကြိမ် အလုပ်လုပ်ပြီးသားဆိုရင်ထပ်အလုပ်မလုပ်ခိုင်းစေပဲနဲ့ cache အနေနဲ့ထိန်းပြီးတော့

performance improve အတွက် လုပ်ပေးထားတဲ့ hook တစ်ခုပါ

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

အရင်ဆုံး ကျ‌တော်တို့ ကုဒ်ကို ဒီလိုလေးရေးလိုက်ပါမယ်

app.jsx

import { useState } from 'react'

function App() {
const [search, setSearch] = useState("")
const [itemList, setItemList] = useState(LargeItemList)

const findItem = itemList.find( item => item.selectItem )
    return(
    <>
        <h4>Selected Item : {findItem?.id}</h4>
        <input value={search} onChange={ e => setSearch(e.target.value)} />
        <h4>Search Name : { search } </h4>
    </>
    )
}

export default App

const LargeItemList = new Array(9_000_000).fill(1).map((item, i)=>{
return {
    id: i,
    selectItem: i === 9_000_000 - 1
}})

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

အရင်ဆုံး ကျတော်တို့ input မှာ စာတွေ အများကြီး ကို တောက်လျှောက် ရိုက်လိုက်ကြည့်တဲ့အခါမှာ

state က update လုပ်တာ lag ဖြစ်လာပြီးတော့ စာလုံးတွေက ခုန်ကျော်ပြီးပေါ်လာတာကိုမြင်ရလိမ့်မယ်

အဲဒါက ဘာကြောင့်ဖြစ်တာလည်းဆိုတော့ ကျတော် အောက်မှာ ဖန်တီးခဲ့တဲ့ LargeItemList ဆိုတဲ့ array က တော်တော်

ကိုကြီးတာမလို့ပါ

ဘာလို့ ကြီးတယ်လို့ပြောရတာလည်းဆိုတော့ ကျတော်တို့ ရဲ့ array က အများကြီးရှိတဲ့အပြင် နောက်ဆုံး index ထဲကို မှာ မှ

ကျတော်က true state ကိုထည့်လိုက်တာပါ

ပြီးတော့ သူ့ကို ကျတော်က ပြန်ပြီးတော့ array.find နဲ့ selectItem ဆိုတဲ့ဟာကို true state ကိုရှာခိုင်းတဲ့အခါမှာ array

ကို အစကနေပြီးအဆုံးထိ တွက်နေရတာမလို့ပါ

အဲဒါကို state update ဖြစ်တိုင်းမှာ အဲဒီarray ကြီးကို ပြန်တွက်နေရတာဖြစ်တော့

ကျတော်တို့ရဲ့ performance က ကျလာရတာပါ

အဲလိုအခြေအနေမှာဆိုရင် ကျတော်တို့က useMemo ဆိုတဲ့ react Hook ကို အသုံးပြုပြီးတော့ သူ့ကိုထိန်းလို့ရပါတယ်

ဘယ်လိုမျိုးထိန်းမှာလည်းဆိုတော့ ကျတော်တို့ ကုဒ်ကိုဒီလိုလေးအရင်ပြင်လိုက် ရအောင်

import { useState, useMemo } from 'react'

// rest of codes

const findItem = useMemo(()=>{
    return itemList.find( item => item.selectItem 
)}, [itemList])

// rest of codes

ကျတော်တို့ LargeItemList ဆိုတဲ့ အထဲမှာမှ ကျတော်တို့ ပြန်ပြီးတော့ computing လုပ်တဲ့နေရာဖြစ်တဲ့

findItem ကိုကျတော်တို့ useMemo ဆိုတဲ့ function ထဲကိုထည့်လိုက်ပါတယ်

ဒီမှာ ကျတော်တို့ တစ်ခု သတိထားမိမှာက useMemo က useEffect လိုမျိုး သူ့ရဲ့အထဲမှာ callback function တစ်ခု

နဲ့ dependency array တစ်ခု ပါတာကို မြင်ရမှာပါ

ဟုတ်ပါတယ် useMemo က ကျတော်တို့ useEffect လိုမျိုး အလုပ်လုပ်ပုံနဲ့တော့ ဆင်ပါတယ်

dependency array ထဲမှာက ကျတော့ ကျတော်တို့ ရဲ့ listing ကြီးပြောင်းလဲနိုင်မလားဆိုတဲ့ itemList state

ကိုထည့်ပေးလိုက်ရင် ရပါပြီ

သူ့ရဲ့ dependency array ထဲမှာရှိနေတဲ့ state မပြောင်းမချင်းမှာ သူက သူရဲ့ callback ကို နောက်တကြိမ်

computation လုပ်ခိုင်းမှာမဟုတ်ပါဘူး

ဒီလိုလေးပြင်လိုက်ပြီးရင် ကျတော်တို့ input ကို ပြန်စမ်းကြည့်တဲ့အခါမှာ ပုံမှန်အတိုင်းအလုပ်လုပ်နေပါလိမ့်မယ်

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