Πρώτα μετρήστε, μετά διορθώστε την πραγματική αιτία — μην διαχέετε useMemo παντού με εικασία.
Χρησιμοποιήστε το React DevTools Profiler (ενεργοποιήστε "Highlight updates when components render"). Δείχνει ποια στοιχεία επανατροφοδοθήκαν και γιατί (τα props άλλαξαν, το state άλλαξε, το parent επανατροφοδοθήκε, το context άλλαξε).
1. Νέα props object/array/function σε κάθε επανατροφοδοσία νικούν το React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Η τιμή context δημιουργείται εκ νέου σε κάθε επανατροφοδοσία → όλοι οι καταναλωτές επανατροφοδοθούν. Απομνημονεύστε την value ή χωρίστε τα contexts.
3. State τοποθετημένο πολύ ψηλά. Η χαμηλωμένη state ώστε να εξαρτάται λιγότερο αριθμό στοιχείων είναι συχνά η μεγαλύτερη νίκη:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Δαπανηρό έργο στην επανατροφοδοσία → τυλίξτε σε useMemo.
Οι επανατροφοδοσίες είναι συνήθως φτηνές — το React είναι γρήγορο. Οι περισσότερες "βελτιστοποιήσεις" προσθέτουν πολυπλοκότητα χωρίς μετρήσιμο όφελος. Προτιμήστε δομικές διορθώσεις (συνεισφορά state, list virtualization για χιλιάδες γραμμές) αντί να διαχέετε memos παντού. Βελτιστοποιήστε τα συγκεκριμένα hotspots που αποκαλύπτει ο profiler, και ξαναμετρήστε για να επιβεβαιώσετε ότι η διόρθωση πραγματικά βοήθησε.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά