Το Hook Βελτιστοποίησης Απόδοσης useMemo στο React

Το πρώτο hook για βελτιστοποίηση απόδοσης που θα εξετάσουμε είναι το useMemo.

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

Ας δούμε πώς λειτουργεί. Ας δημιουργήσουμε ένα component με ένα κουμπί και έναν τίτλο h3:

return (
	<div>
		<h3>Κείμενο</h3>
		<button>κλικ</button>
	</div>
);

Και τώρα ας κάνουμε έτσι ώστε με κλικ στον τίτλο το χρώμα του να αλλάζει από πορτοκαλί σε πράσινο και αντίστροφα. Αρχικά ας ορίσουμε μια state μεταβλητή isGreen:

const [isGreen, setIsGreen] = useState(false);

Ας προσθέσουμε στο χαρακτηριστικό style του τίτλου μια συνθήκη αλλαγής χρώματος και ας προσθέσουμε έναν χειριστή κλικ:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Κείμενο</h3>

Ας υποθέσουμε ότι έχουμε επίσης κάποια τιμή, η οποία θα αυξάνεται κατά μία μονάδα με κλικ στο κουμπί μας. Ας ορίσουμε για αυτή μια state μεταβλητή:

const [num, setNum] = useState(0);

Ας προσθέσουμε τον χειρισμό του κλικ στο κουμπί:

<button onClick={() => setNum(num + 1)}>
	κλικ
</button>

Ας υποθέσουμε επίσης ότι έχουμε κάποια συνάρτηση square, η οποία θα επιστρέφει το τετράγωνο της τιμής num. Το αποτέλεσμα κλήσης της συνάρτησης θα το αποθηκεύουμε σε μια μεταβλητή result:

const result = square(num);

function square(num) {
	return num * num;
}

Ας εμφανίσουμε το result στο κείμενο του κουμπιού:

<button onClick={() => setNum(num + 1)}>
	κλικ: {result}
</button>

Ως αποτέλεσμα, έχουμε το εξής: με κλικ στο κουμπί αλλάζει η τιμή num, η οποία στη συνέχεια υψώνεται στο τετράγωνο, και με κλικ στον τίτλο αλλάζει το χρώμα του τίτλου.

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

Ας βαρύνουμε λίγο τη συνάρτησή μας, τώρα θα σκέφτεται λίγο περισσότερο. Έτσι θα προσομοιώσουμε μεγάλους χρόνους υπολογισμού:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Απλά μην κάνεις τίποτα ...
	}
	
	return num * num;
}

Πατήστε τώρα στον τίτλο. Συμβαίνει ότι τώρα, λόγω της μεγάλης διάρκειας εκτέλεσης της συνάρτησης square (και δεν αγγίζουμε το κουμπί!) πρέπει να περιμένουμε μια αιωνιότητα για να αλλάξει το χρώμα του τίτλου!

Εδώ θα μας βοηθήσει το hook useMemo. Για αυτό, πρέπει ως πρώτη παράμετρο να περάσουμε μια συνάρτηση, που υπολογίζει την τιμή που θέλουμε να προσωρινά αποθηκεύσουμε. Αυτή η συνάρτηση πρέπει να είναι καθαρή και να μην δέχεται καμία παράμετρο. Και ως δεύτερη παράμετρο - τις εξαρτήσεις σε αγκύλες, με άλλα λόγια, όλες τις αντιδραστικές τιμές που συμμετέχουν στον κώδικα της συνάρτησης. Έτσι, στο result θα γράψουμε τώρα την ακόλουθη κατασκευή:

const result = useMemo(() => square(num), [num]);

Ας πατήσουμε ξανά στον τίτλο. Τώρα, αν δεν αγγίζουμε το κουμπί με τους υπολογισμούς και δεν αλλάζουμε έτσι την τιμή της state μεταβλητής num, τότε τίποτα δεν ξαναυπολογίζεται, και το React εμφανίζει την προσωρινά αποθηκευμένη τιμή στο κουμπί, γι' αυτό ο τίτλος μας αλλάζει γρήγορα το χρώμα του.

Δημιουργήστε ένα component App, τοποθετήστε σε αυτό μια παράγραφο. Ορίστε μια state μεταβλητή text με αρχική τιμή 'react', αφήστε την τιμή της state μεταβλητής να εμφανίζεται ως κείμενο της παραγράφου. Αφήστε με κλικ στην παράγραφο, στο τέλος του κειμένου της να προστίθεται ένα θαυμαστικό.

Ορίστε μια ακόμη state μεταβλητή num, με αρχική τιμή 0. Τοποθετήστε στο App μια ακόμη παράγραφο. Κάντε έτσι, ώστε με κλικ σε αυτήν η num να αυξάνεται κατά 1.

Και τώρα προσθέστε στο App τη συνάρτηση triple, η οποία ως παράμετρο δέχεται το num και επιστρέφει την τριπλασιασμένη τιμή του. Τοποθετήστε το αποτέλεσμα κλήσης της συνάρτησης στη μεταβλητή result. Εμφανίστε το result ως κείμενο της δεύτερης παραγράφου. Πατήστε με τη σειρά στις παραγράφους, σημειώστε πόσο αργά προστίθενται τα θαυμαστικά.

Διορθώστε την κατάσταση, τυλίγοντας την αργή συνάρτηση triple στο useMemo.