પ્રથમ માપો, પછી વાસ્તવિક કારણને સુધારો — અનુમાન પર હર જગ્યાએ useMemo મૂકશો નહીં.
React DevTools Profiler નો ઉપયોગ કરો ("Highlight updates when components render" સક્ષમ કરો). તે દર્શાવે છે કે કયા ઘટકો પુનરાવર્તિત થયા અને કેમ (props બદલાયા, state બદલાયું, પિતૃ પુનરાવર્તિત થયું, 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 દરેક render માટે પુનઃસર્જિત → બધા consumer પુનરાવર્તિત થશે. 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 માં લપેટો.
પુનરાવર્તનો સામાન્ય રીતે સસ્તા છે — React ઝડપી છે. મોટાભાગે "ઑપ્ટિમાઇઝેશન" કોઈ માપી શકાય એવા લાભ વિના જટિલતા ઉમેરે છે. structural fixes પસંદ કરો (state colocating, હજારો પંક્તियો માટે list virtualization) memos ઉપર છતરી કરવાનો બદલે. Profiler દ્વારા પ્રગટ કરેલ ચોક્કસ hotspots ને ઑપ્ટિમાઇઝ કરો, અને સુધારણા ખરેખર મદદ કરે છે તે ચકાસવા માટે પુનરાવર્તન કરો.