पहिले माप गर्नुहोस्, त्यसपछि वास्तविक कारण ठीक गर्नुहोस् — अनुमानमा useMemo सबै ठाउँमा नछर्नुहोस्।
React DevTools Profiler प्रयोग गर्नुहोस् ("Highlight updates when components render" सक्षम गर्नुहोस्)। यसले कुन कम्पोनेन्टहरू पुनः-render भएका छन् र किन (props परिवर्तन भएको, state परिवर्तन भएको, parent render भएको, context परिवर्तन भएको) भनेर देखाउँछ।
१. प्रत्येक render मा नयाँ 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} />
२. प्रत्येक render मा Context value पुनः निर्माण गरिन्छ → सबै consumers पुनः-render हुन्छन्। value को मेमोइज गर्नुहोस् वा contexts विभाजन गर्नुहोस्।
३. State धेरै माथी राखिएको छ। State तल कोलोकेट गरेर कम कम्पोनेन्टहरू यससँग निर्भर हुन सक्छन् भन्ने अक्सर सबै भन्दा ठूलो जीत हो:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
४. Render मा महँगो काम → useMemo मा wrap गर्नुहोस्।
पुनः-renders सामान्यतः सस्तो हुन्छन् — React छिटो छ। अधिकांश "अप्टिमाइजेशनहरु" कोई मापनयोग्य लाभ बिना जटिलता थप्छन्। संरचनात्मक समाधानहरू (state colocating, हजारहरू पङ्क्तिहरू को लागि list virtualization) memos बिखेर गरेको भन्दा प्राथमिकता दिनुहोस्। profiler ले प्रकट गरेको विशिष्ट hotspots अप्टिमाइज गर्नुहोस्, र समाधानले वास्तवमा मद्दत गरेको पुष्टि गर्न पुनः-माप गर्नुहोस्।