Creative Coder Myanmar

𝐮𝐬𝐞𝐌𝐞𝐦𝐨 𝐇𝐨𝐨𝐤 (𝐑𝐞𝐚𝐜𝐭 𝐇𝐨𝐨𝐤 𝐒𝐞𝐫𝐢𝐞𝐬)

======================================

React Hook Series ရဲ့ built in hook တစ်ခုဖြစ်တဲ့ useMemo Hook ကို value တွေကို memorize ဖြစ်ဖို့ရယ် ကိုယ့်ရဲ့ application ရဲ့ performance ကိုတိုးလာစေချင်တဲ့အတွက်အသုံးပြုကြပါတယ်။
Function call တွေခေါ်တဲ့အခါ caching process တွေကိုမှတ်ထားပေးတာကြောင့် နောက်တစ်ခေါက်ခေါ်တဲ့နေရာမှာလည်း same argument တွေကိုပဲအသုံးပြုပြီး ပြန်တွက်စရာမလိုဘဲ cache value ကိုသာ return ပြန်ပေးမှာဖြစ်ပါတယ်။

Code Example ကတော့

const memoizedValue = useMemo(() => {
// function to be memoized
return memoizedValue;
}, [dependencyList]);

ပထမဆုံး argument တစ်ခုဖြစ်တဲ့ useMemo က return ပြန်တဲ့အခါ value တွေကိုမှတ်မိစေဖို့အသုံးပြုပါတယ်။ second argument ကတော့ memorized value တွေပေါ်မူတည်ပြီးဖြစ်လာမဲ့ dependency array တစ်ခုပဲဖြစ်ပါတယ်။ dependency array ထဲမှာတစ်ခုခုပြောင်းလဲသွားတာနဲ့ memorize value ကိုပြန်ပြီး calculate လုပ်မှာလည်းဖြစ်ပါတယ်။

ဥပမာ item list လေးတစ်ခုကို render လုပ်ပေးမဲ့ component တစ်ခုရှိတယ်ဆိုပါစို့။ search query‌ ပေါ်မူတည်ပြီး list ကို filter လုပ်ချင်တယ်ဆိုရင် useMemo Hook ကို filter လုပ်ပြီးသား list ကိုမှတ်မိဖို့အတွက် အသုံးပြုလို့ရပါတယ်။

Code example လေးနဲ့အတူကြည့်လိုက်ရအောင် 👀

import React, { useState, useMemo } from 'react';

function ItemList({ items, searchQuery }) {
const [filteredItems, setFilteredItems] = useState(items);

useMemo(() => {
const newFilteredItems = items.filter(item => item.includes(searchQuery));
setFilteredItems(newFilteredItems);
}, [items, searchQuery]);

return (
<ul>
{filteredItems.map(item => <li key={item}>{item}</li>)}
</ul>
);
}

ဒီ example မှာဆိုရင် newfilteredItems array ကို memorize လုပ်ဖို့ useMemo Hook ကိုအသုံးပြုထားပါတယ်။ useMemo function ထဲမှာ အသုံးပြုထားတဲ့ setFilteredItems ကိုတော့ function call ခေါ်ပြီးတာနဲ့တစ်ပြိုင်နက် new filtered items တွေရဲ့ state ကို update လုပ်ဖို့အသုံးပြုပါတယ်။ items ဒါမှမဟုတ် searchQuery မှာ ပြောင်းလဲမှုဖြစ်သွားတာနဲ့ component ရဲ့ performance ကိုတိုးစေမဲ့ useMemo Hook ကိုခေါ်ပေးမှာပဲဖြစ်ပါတယ်။

Creative Coder Myanmar Telegram Channel ⬇️
https://t.me/creativecodermm

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐎𝐟𝐟𝐜𝐢𝐚𝐥 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 ⬇
https://creativecodermm.com/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐂𝐡𝐚𝐧𝐧𝐞𝐥 ⬇
https://www.youtube.com/c/CreativeCoderMyanmar

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐋𝐢𝐧𝐤𝐞𝐝𝐢𝐧 ⬇
https://www.linkedin.com/company/creative-coder-myanmar/

𝐂𝐫𝐞𝐚𝐭𝐢𝐯𝐞 𝐂𝐨𝐝𝐞𝐫 𝐌𝐲𝐚𝐧𝐦𝐚𝐫 𝐆𝐢𝐭𝐇𝐮𝐛 ⬇
https://github.com/Creative-Coder-Myanmar

#Creative_Coder_Myanmar
#developer
#website
#react
#hook