X'inhu React.memo u meta hu xieraq l-użu tiegħu?

Question

IT Interview Practice · Accepted Answer

`React.memo` ibuqq komponent sabiex **iskip l-re-rendering meta l-props tiegħu huma shallow-equal mal-qabel**. B'mod default, il-ħadd ġdid ir-render kull meta l-ġenitur jagħmel render; `memo` qasir-circuits dan meta l-props ma bdilux verament. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Il-ħanq: jeħtieġ props stabbli `memo` jagħmel komparazzjoni **shallow**. Jekk il-ġenitur jipassa object/array/function ġdid kull render, il-komparazzjoni dejjem tfalli u `memo` ma tagħmel xejn: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Irreparazzjoni billi tistabbilizza l-funzjoni b'`useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Meta hu xieraq - Komponent ir-render **spiss** bi l-props **istess** u r-render tiegħu mhux trivjali (ellenki kbar, subtree għali). ## Meta mhuwiex - Ħafna komponents huma irħas; il-komparazzjoni nnifisha għandha kost, u r-rebbiegħa ta' kollox iżid il-kumplessità mingħajr benefiċċju. **Profile ewwel** b'React DevTools Profiler, allura memoize il-hotspots ippruvati — l-ebda memoize blindly.

Il-ħanq: jeħtieġ props stabbli

Meta hu xieraq

Meta mhuwiex

Mistoqsijiet relatati