19/11/2025
⚛️React এর এমন ২টা Hook আছে যেগুলো সবাই use করে, কিন্তু সঠিকভাবে ব্যবহার করে খুব কম মানুষ!
আজকে কথা বলবো useMemo এবং useCallback নিয়ে।
Problem হলো—এগুলো React এ খুব common হলেও, বেশিরভাগ ডেভেলপার জানেই না এগুলো কখন সত্যি কাজে লাগে আর কখন এগুলো use করলে উল্টো ক্ষতি করে।
🔥React এর Hidden Fact
"Optimization" শব্দটা শোনলেই সবাই useMemo/useCallback দিয়ে প্রোজেক্ট optimize করা শুরু করে...
কিন্তু আসল বিষয় হচ্ছে—
👉এগুলো use না করলে যেই জায়গায় 5ms লাগতো
👉সেখানে use করলে React কে cost দিয়ে মাঝে মাঝে 12ms হিসাব করতে হয়।
কারণ, Hooks নিজেরাও প্রোজেক্ট - এ extra কিছু কাজ তৈরি করে।
🎯তাহলে এগুলো আসলে কখন ব্যবহার করতে হয়?
🟦1) useMemo → When to use useMemo :
কোনো calculation খুব heavy
যেমন sorting, filtering, large array process
এবং এমন calculation যা rerender এ বারবার চললে UI slow হয়ে যায়
উদাহরণ:
const sortedList = useMemo(() => heavySortFunction(data), [data]);
এখানে Benefit হলো React heavySortFunction প্রতি render-এ চলবে না—
শুধু যখন data পরিবর্তন হবে তখনই চলবে।
🟦2) useCallback → When to use useCallback :
একটি function child component এ send করছো
আর child unnecessary rerender হচ্ছে কারণ function নতুন reference পাচ্ছে
উদাহরণ:
const handleClick = useCallback(() => {
console.log("Clicked");
}, []);
এখন এই function বারবার নতুন করে তৈরি হবে না।
এবং function reference এর কারণে Child component ও rerender হবে না।
⚠️কোথায় useMemo/useCallback ব্যবহার করা উচিত নয়?
ছোট calculation
simple function
low-level state change
UI এ কোনো effect পড়ে না এমন কাজ
Because 👉 “Over optimization is also a bug.”
React এ সবকিছু memo করা মানে performance বাড়ানো নয়—
বরং React কে বেশি ভাবতে বাধ্য করা।
Smart Developer = জানে কোথায় optimization লাগবে আর কোথায় লাগবে না।
✔️ Conclusion
React-এ পারফরম্যান্স optimization তখনই সফল হবে, যখন আপনি জানবেন—
“Which hook solves which problem?”
