API memo in React

Prima di considerare il prossimo hook, è necessario menzionare anche la utile API memo, che ci aiuta a evitare il re-rendering di un componente, se le sue props rimangono invariate.

Analizziamolo con un esempio. Creiamo un componente App, che avrà due input, in cui, supponiamo, vengono inseriti nome e cognome:

return (
	<div>
		<label>
			nome:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			cognome:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Aggiungiamo all'inizio del componente gli stati per loro:

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

Creiamo anche un componente figlio Child.js, che visualizzi un saluto, in cui verrà mostrato il nome inserito. Inoltre, nella console verrà visualizzata la stringa 'child render' ad ogni rendering di questo componente:

function Child({ name }) {
	console.log('child render');
	return <h3>Ciao {name}!</h3>;
}

Aggiungiamo Child nel markup del componente principale dopo l'ultimo input e passiamogli come prop il nome:

<Child name={name} />

Importiamolo nel componente principale:

import Child from './Child';

Ora apriamo la console e iniziamo a inserire nome e cognome nei campi di input. Qui vedremo che anche inserendo caratteri nel campo per il cognome, il nostro componente figlio verrà rirenderizzato ogni volta. Nessun problema, dato che il nostro componente è piccolo. Ma immaginate se questo componente visualizzasse una grande quantità di dati e, allo stesso tempo, venisse rirenderizzato ogni volta.

Ora avvolgiamo il componente figlio in memo, e osserviamo come cambia il rendering. Per prima cosa importiamo memo in esso:

import { memo } from 'react';

Poi creiamo una nuova variabile e assegniamole il nostro Child, avvolto in memo. Otterremo la seguente espressione di funzione:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Ciao {name}!</h3>;
});

Apriamo la console e ricominciamo a inserire nome e cognome nei campi. Ora vediamo che inserendo il cognome, il nostro componente figlio non viene rirenderizzato.

Bisogna ricordare che questo non funzionerà, se con le props invariate cambiano gli stati utilizzati dal componente o il contesto, che utilizza i cambiamenti.

Prendete il codice del componente App, che abbiamo realizzato in questa lezione, lasciate in esso solo il primo input. Create un componente React Text, contenente un paragrafo con il testo 'long text', e posizionatelo in App dopo l'input.

Nel componente Text aggiungete la riga console.log('text render');. Assicuratevi che durante l'inserimento di caratteri nell'input il componente Text venga rirenderizzato ogni volta.

E ora avvolgete il componente Text in memo. Assicuratevi, che durante l'inserimento di caratteri nell'input il componente Text non venga rirenderizzato nuovamente.