Cosa fa React.memo e quando vale la pena usarlo?

Question

Accepted Answer

`React.memo` avvolge un componente affinché **salti il re-rendering quando i suoi props sono superficialmente uguali al rendering precedente**. Per impostazione predefinita, un figlio esegue il re-rendering ogni volta che lo fa il suo genitore; `memo` lo cortocircuita quando i props in realtà non sono cambiati. ```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 problema: necessita di props stabili `memo` esegue un confronto **superficiale**. Se il genitore passa un nuovo oggetto/array/funzione ad ogni rendering, il confronto fallisce sempre e `memo` non fa nulla: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Risolvilo stabilizzando la funzione con `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Perché è importante - Un componente esegue il rendering **spesso** con gli stessi props e il suo rendering è non banale (liste grandi, sottoalberi costosi). ## Quando non lo è - La maggior parte dei componenti sono economici; il confronto stesso ha un costo e avvolgere tutto aggiunge complessità senza guadagno. **Profileare prima** con React DevTools Profiler, quindi memoizzare gli hotspot provati — non memoizzare alla cieca.