Çfarë bën React.memo dhe kur ia vlen ta përdorësh?

Question

Accepted Answer

`React.memo` mbështetje një komponent në mënyrë që të **kapërcejë rirenditjen kur props-et e tij janë shallow-equal** me renderimin e mëparshëm. Si parazgjedhje, një komponent fëmij rirendet sa herë që bën prindi; `memo` e ndërpret këtë kur props-et nuk janë ndryshuar në fakt. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Kurreja: ka nevojë për props-e të qëndrueshme `memo` bën një krahasim **të cekët**. Nëse prindi kalon një objekt/array/funksion të ri në çdo renderim, krahasimi gjithmonë dështon dhe `memo` nuk bën asgjë: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Rreshtoje duke e stabilizuar funksionin me `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kur ia vlen - Një komponent renderohet **shpesh** me të **njëjtat** props dhe renderimi i tij është jo-trivial (listat e mëdha, nënpemë të shtrenjta). ## Kur nuk ia vlen - Shumica e komponentëve janë të lirë; krahasimi në vetvete ka një kosto dhe mbështetja e gjithçkaje shton kompleksitet pa fitim. **Profileso fillimisht** me React DevTools Profiler, pastaj memoizo pikat e vëruara — mos memoizo në mënyrë të verbër.