Τι κάνει το useMemo; Πότε πρέπει να το χρησιμοποιούμε; Πρέπει να τυλίγουμε το παιδικό συστατικό σε React.memo;

useMemo — είναι ένα hook στο React που επιτρέπει την αποθήκευση (cache) του αποτελέσματος μιας λειτουργίας, ώστε να αποφεύγονται περιττές επαναϋπολογίσεις κατά το ξανα rendering του συστατικού.

Χρησιμοποιήστε το useMemo όταν έχετε δαπανηρούς υπολογισμούς ή πολύπλοκα αντικείμενα που δεν πρέπει να αναδημιουργούνται χωρίς λόγο.

Παράδειγμα:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Εδώ, το computeExpensiveValue καλείται μόνο αν αλλάξουν τα a ή b.

Όσον αφορά το React.memo — είναι ένα HOC που αποθηκεύει το ίδιο το συστατικό, αποτρέποντας την επανα-απεικόνιση αν τα props δεν αλλάξουν.

Πρέπει να τυλίξετε το παιδικό συστατικό με React.memo αν:

• το συστατικό απεικονίζεται συχνά,
• και τα props δεν αλλάζουν,
• και η επανα-απεικόνιση του συστατικού είναι δαπανηρή.

Συνοπτικά:

• το useMemo βελτιστοποιεί τους υπολογισμούς μέσα στο συστατικό,
• το React.memo βελτιστοποιεί την επανα-απεικόνιση των παιδικών συστατικών.

Και τα δύο εργαλεία μπορούν να χρησιμοποιηθούν μαζί για βελτίωση της απόδοσης, αλλά πρέπει να εφαρμόζονται μόνο όταν είναι πραγματικά απαραίτητα, για να μην περιπλέκουν τον κώδικα.