Τι κάνει το React.memo και πότε αξίζει να το χρησιμοποιήσουμε;

Question

Accepted Answer

`React.memo` τυλίγει ένα component ώστε να **παραλείψει το re-rendering όταν τα props του είναι shallow-equal με το προηγούμενο render**. Από προεπιλογή, ένα child component re-renderάρεται κάθε φορά που κάνει re-render το parent του; `memo` κόβει αυτό όταν τα props δεν άλλαξαν πραγματικά. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Η παγίδα: χρειάζεται σταθερά props `memo` κάνει μια **shallow** σύγκριση. Αν το parent περνάει ένα νέο object/array/function σε κάθε render, η σύγκριση αποτυγχάνει πάντα και `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 => ); ``` ## Πότε αξίζει - Ένα component render **συχνά** με **ίδια** props και το rendering του είναι non-trivial (μεγάλες λίστες, ακριβά subtrees). ## Πότε δεν αξίζει - Τα περισσότερα components είναι φθηνά. η σύγκριση έχει κόστος και το τύλιγμα όλων προσθέτει πολυπλοκότητα χωρίς κέρδος. **Κάνε profile πρώτα** με το React DevTools Profiler, μετά memoize τα αποδεδειγμένα hotspots — μην κάνεις memoize τυφλά.