முதலில் அளவிடவும், பின்னர் உண்மையான காரணத்தை சரிசெய்யவும் — ஊகத்தின் அடிப்படையில் எல்லா இடங்களிலும் useMemo கூடாது.
React DevTools Profiler ஐப் பயன்படுத்தவும் ("Highlight updates when components render" ஐ இயக்கவும்). எந்த கூறுகள் மீண்டும் rendering செய்யப்பட்டன என்பதைக் காட்டுகிறது மற்றும் ஏன் (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 ஐ குறைப்பது அதனால் குறைவான கூறுகள் அதைச் சார்ந்திருக்கின்றன பெரும்பாலும் மிகப் பெரிய வெற்றி:
// 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 ஆயிரக்கணக்கான வரிசைகளுக்கு) மற்றும் மemos சிதறாது. Profiler வெளிப்படுத்தும் குறிப்பிட்ட hotspots ஐ optimize செய்து, சரிசெய்வு உண்மையில் உதவிய என்பதை உறுதிப்படுத்த மீண்டும் அளவிடவும்.