React.memo શું કરે છે અને તેનો ઉપયોગ કરવો ક્યારે મૂલ્યવાન છે?

Question

Accepted Answer

`React.memo` એક ઘટકને લપેટે છે જેથી તે **પ્રોપ્સ છેલ્લી રેન્ડરિંગ સાથે શ્વસવા-સમાન હોય તેવા પુનઃરેન્ડરિંગને છોડી દે**. ડિફોલ્ટ રીતે, સંતાન દર વખતે તેના માતાપિતા તરીકે પુનઃરેન્ડર થાય છે; `memo` તે શોર્ટ-સર્કિટ કરે છે જ્યારે પ્રોપ્સ વાસ્તવમાં બદલાયા નથી. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## બીજું: તેને સ્થિર પ્રોપ્સની જરૂર છે `memo` એક **શ્વસવા** તુલના કરે છે. જો પિતા-માતા દર રેન્ડરિંગ સાથે નવો ઑબ્જેક્ટ/એરે/ફંક્શન પાસ કરે છે, તો તુલના હંમેશા નિષ્ફળ થાય છે અને `memo` કંઈ કરતો નથી: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` `useCallback` સાથે ફંક્શનને સ્થિર કરીને ફિક્સ કરો: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## જ્યારે તે મૂલ્યવાન છે - એક ઘટક **વારંવાર** **સમાન** પ્રોપ્સ સાથે રેન્ડર કરે છે અને તેનું રેન્ડરિંગ બિન-તુચ્છ છે (મોટી સૂચિઓ, મંહગા સબટ્રીઝ). ## જ્યારે તે નથી - મોટાભાગના ઘટકો સસ્તા છે; તુલનાનું પોતાનું ખર્ચ છે, અને બધું લપેટવું કોનો લાભ વિના જટિલતા ઉમેરે છે. **પ્રથમ પ્રોફાઇલ કરો** React DevTools Profiler સાથે, પછી સાબિત હોટસ્પટ્સને મેમોરાઇઝ કરો — અંધાધૂંધીથી મેમોરાઇઝ કરશો નહીં.