प्रथम मोजमाप करा, नंतर वास्तविक कारण सुधारा — अंदाजानुसार सर्वत्र 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 प्रत्येक रेंडरमध्ये पुनर्निर्मित → सर्व consumers पुन्हा रेंडर होतात. 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. रेंडरमध्ये महाग कार्य → useMemo मध्ये गुंडाळा.
Re-renders सामान्यतः स्वस्त असतात — React वेगवान आहे. बहुतांश "ऑप्टिमाइজेशन" कोणत्याही मोजण्याच्या लाभासाठी जटिलता जोडतात. संरचनात्मक सुधारे (state colocating, हजारो पंक्तींसाठी list virtualization) memos विखुरण्यापेक्षा पसंत करा. profiler प्रकट करणारे विशिष्ट hotspots ऑप्टिमाइজ करा, आणि सुधार खरोखर मदत केली याची पुष्टी करण्यासाठी पुन्हा मोजमाप करा.