ముందుగా కొలவவండి, ఆపై నిజమైన కారణాన్ని సరిచేయండి — ఊహ ఆధారంగా everywhere కి useMemo వేయవద్దు.
React DevTools Profiler ను ఉపయోగించండి ("Highlight updates when components render" ఎనేబల్ చేయండి). ఏ components మళ్లీ render చేయబడ్డాయి మరియు ఎందుకు (props మారిన, state మారిన, parent rendered, context మారిన) అని చూపుతుంది.
1. ప్రతి 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} />
2. Context value ప్రతి render కి మళ్లీ సృష్టించబడింది → అన్ని consumers మళ్లీ render అవుతాయి. value ను memoize చేయండి లేదా contexts ను విభజించండి.
3. State చాలా ఎత్తులో ఉంచబడింది. State ను సంక్షిప్తం చేయడం కాబట్టి తక్కువ components దానిపై ఆధారపడ్డాయి తరచుగా సంబంధితమైన లాభం:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Render లో महंगా పని → useMemo లో wrap చేయండి.
Re-renders సాధారణంగా చౌక — React వేగవంతమైనది. చిన్నపిల్ల "optimizations" కొలవలేని లాభం కోసం సంక్లిష్టతను జోడిస్తాయి. నిర్మాణ సరిచేతలను (colocating state, list virtualization వేలల రేపై) scattering memos కంటే ఇష్టపడండి. Profiler బహిర్గతం చేసే నిర్దిష్ట hotspots ను అనుకూలం చేయండి, మరియు సరిచేత నిజానికి సహాయపడిందని నిర్ధారించడానికి మళ్లీ కొలవవండి.