API memo στο React

Πριν εξετάσουμε το επόμενο hook, είναι απαραίτητο να αναφέρουμε και το χρήσιμο API memo, το οποίο μας βοηθά να αποφεύγουμε την επαναληπτική απόδοση ενός component, εάν τα props του παραμένουν αμετάβλητα.

Ας το εξετάσουμε με ένα παράδειγμα. Ας δημιουργήσουμε ένα component App, στο οποίο θα υπάρχουν δύο πεδία εισαγωγής (input), στα οποία, ας υποθέσουμε, εισάγονται το όνομα και το επώνυμό:

return (
	<div>
		<label>
			όνομα:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			επώνυμό:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Ας προσθέσουμε στην αρχή του component states για αυτά:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Ας φτιάξουμε επίσης και ένα θυγατρικό component Child.js, ας εμφανίζει ένα χαιρετισμό, στον οποίο θα εμφανίζεται το όνομα που εισάγεται. Επίσης, στην κονσόλα θα εμφανίζεται η συμβολοσειρά 'child render' κατά κάθε απόδοση (rendering) αυτού του component:

function Child({ name }) {
	console.log('child render');
	return <h3>Γεια σου {name}!</h3>;
}

Ας προσθέσουμε το Child στο markup του κύριου component μετά το τελευταίο πεδίο εισαγωγής και ας του περνάμε ως prop το όνομα:

<Child name={name} />

Ας το εισάγουμε (import) στο κύριο component:

import Child from './Child';

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

Και τώρα ας τυλίξουμε (wrap) το θυγατρικό component στο memo, και ας δούμε πώς αλλάζει η απόδοση. Αρχικά ας εισάγουμε (import) σε αυτό το memo:

import { memo } from 'react';

Στη συνέχεια, ας δημιουργήσουμε μια νέα μεταβλητή και ας της αναθέσουμε το Child μας, τυλιγμένο στο memo. Θα πάρουμε το ακόλουθο functional expression:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Γεια σου {name}!</h3>;
});

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

Πρέπει να θυμόμαστε ότι αυτό δεν θα λειτουργήσει, εάν με αμετάβλητα props αλλάζουν states που χρησιμοποιούνται από το component ή context που χρησιμοποιεί αλλαγές.

Πάρτε τον κώδικα του component App, που φτιάξαμε σε αυτό το μάθημα, αφήστε σ' αυτόν μόνο το πρώτο πεδίο εισαγωγής. Δημιουργήστε ένα React component Text, που να περιέχει μια παράγραφο με κείμενο 'long text', και τοποθετήστε το στο App μετά το πεδίο εισαγωγής.

Στο component Text προσθέστε τη γραμμή console.log('text render');. Βεβαιωθείτε ότι κατά την εισαγωγή χαρακτήρων στο πεδίο εισαγωγής το component Text ξανασχεδιάζεται κάθε φορά.

Και τώρα τυλίξτε (wrap) το component Text στο memo. Βεβαιωθείτε ότι κατά την εισαγωγή χαρακτήρων στο πεδίο εισαγωγής το component Text δεν ξανασχεδιάζεται επαναληπτικά.