Ce face React.memo și când merită să-l folosești?

Question

Accepted Answer

`React.memo` înfășoară o componentă pentru ca aceasta să **sară peste re-rendering atunci când prop-urile sale sunt shallow-equal** cu renderarea anterioară. În mod implicit, o componentă copil se re-renderizează ori de câte ori îi face părintele; `memo` scurtcircuitează asta atunci când prop-urile nu s-au schimbat de fapt. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Ciosul: necesită prop-uri stabile `memo` face o comparație **shallow**. Dacă părintele transmite un nou obiect/array/funcție la fiecare render, comparația întotdeauna eșuează și `memo` nu face nimic: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Reparează prin stabilizarea funcției cu `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Când merită - O componentă se renderizează **adesea** cu aceleași prop-uri și renderarea acesteia este non-trivială (liste mari, subarbori costisitori). ## Când nu merită - Majoritatea componentelor sunt ieftine; comparația în sine are un cost, iar înfășurarea totului adaugă complexitate fără câștig. **Profilează mai întâi** cu React DevTools Profiler, apoi memoizează hotspoturile dovedite — nu memoiza orbește.