প্রথমে পরিমাপ করুন, তারপর প্রকৃত কারণ ঠিক করুন — অনুমানের উপর ভিত্তি করে সর্বত্র useMemo ছড়িয়ে দিবেন না।
React DevTools Profiler ব্যবহার করুন ("Highlight updates when components render" সক্ষম করুন)। এটি দেখায় কোন কম্পোনেন্টগুলি পুনর্নির্মিত হয়েছে এবং কেন (props পরিবর্তিত হয়েছে, state পরিবর্তিত হয়েছে, প্যারেন্ট রেন্ডার করেছে, context পরিবর্তিত হয়েছে)।
1. প্রতিটি রেন্ডারে নতুন object/array/function props React.memoকে পরাজিত করে:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context value প্রতিটি রেন্ডারে পুনরায় তৈরি হয় → সমস্ত consumers পুনর্নির্মিত হয়। value স্মরণীয় রাখুন অথবা contexts বিভক্ত করুন।
3. State খুব উপরে রাখা। State কম করা যাতে কম কম্পোনেন্ট এটির উপর নির্ভর করে, প্রায়শই সবচেয়ে বড় জয়:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. রেন্ডারে ব্যয়বহুল কাজ → useMemo-এ মোড়ান।
পুনর্নির্মাণ সাধারণত সস্তা — React দ্রুত। বেশিরভাগ "অপটিমাইজেশন" পরিমাপযোগ্য সুবিধা ছাড়াই জটিলতা যোগ করে। কাঠামোগত সংশোধন পছন্দ করুন (state সহাবস্থান, হাজার হাজার সারির জন্য list virtualization) memos ছড়িয়ে দেওয়ার পরিবর্তে। প্রোফাইলার প্রকাশ করে এমন নির্দিষ্ট hotspots অপটিমাইজ করুন, এবং নিশ্চিত করতে পুনঃপরিমাপ করুন যে সংশোধন সত্যিই সাহায্য করেছে।