पहले मापें, फिर वास्तविक कारण को ठीक करें — अनुमान पर हर जगह useMemo न लगाएं।
React DevTools Profiler का उपयोग करें ("Highlight updates when components render" सक्षम करें)। यह दिखाता है कि कौन से घटकों को फिर से रेंडर किया गया और क्यों (props बदले गए, state बदली गई, parent को फिर से रेंडर किया गया, context बदली गई)।
को हरा देते हैं:
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 प्रत्येक रेंडर में फिर से बनाया जाता है → सभी उपभोक्ता फिर से रेंडर होते हैं। value को memoize करें या 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. Render में महंगा काम → useMemo में लपेटें।
पुनः-रेंडर आमतौर पर सस्ते होते हैं — React तेज़ है। अधिकांश "अनुकूलन" मापने योग्य लाभ के बिना जटिलता जोड़ते हैं। memos को फैलाने के बजाय संरचनात्मक सुधार (state को colocate करना, हजारों पंक्तियों के लिए list virtualization) को प्राथमिकता दें। Profiler द्वारा प्रकट किए गए विशिष्ट hotspots को अनुकूलित करें, और यह पुष्टि करने के लिए फिर से मापें कि सुधार वास्तव में मदद करता है।