API memo dans React

Avant d'examiner le prochain hook, il est nécessaire de mentionner l'API utile memo, qui nous aide à éviter le re-rendu d'un composant, si ses props restent inchangées.

Analysons cela avec un exemple. Créons un composant App, qui contiendra deux champs de saisie, pour, supposons, le prénom et le nom de famille :

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

Ajoutons en haut du composant les états pour ceux-ci :

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

Créons également un composant enfant Child.js, qu'il affiche une salutation, dans laquelle sera affiché le prénom saisi. Aussi, dans la console, sera affichée la chaîne 'child render' à chaque rendu de ce composant :

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

Ajoutons Child dans le rendu du composant principal après le dernier champ de saisie et passons-lui le prénom en tant que prop :

<Child name={name} />

Importons-le dans le composant principal :

import Child from './Child';

Ouvrons maintenant la console et saisissons le prénom et le nom dans les champs. Ici nous verrons que même en saisissant des caractères dans le champ pour le nom de famille, notre composant enfant sera re-rendu à chaque fois. Aucun problème, car notre composant est petit. Mais imaginez si ce composant affichait une grande quantité de données et était en même temps re-rendu à chaque fois.

Maintenant, enveloppons le composant enfant dans memo, et observons comment le rendu change. Pour commencer, importons memo dans celui-ci :

import { memo } from 'react';

Ensuite, créons une nouvelle variable et assignons-lui notre Child, enveloppé dans memo. Nous obtiendrons l'expression déclaration de fonction suivante :

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

Ouvrons la console et saisissons à nouveau le prénom et le nom dans les champs. Maintenant, nous voyons qu'en saisissant le nom de famille, notre composant enfant ne se re-rend pas.

Il faut se rappeler que cela ne fonctionnera pas si, avec des props inchangées, les états utilisés par le composant changent ou le contexte utilisant les changements.

Prenez le code du composant App, que nous avons fait dans cette leçon, laissez-y seulement le premier champ de saisie. Créez un composant React Text, contenant un paragraphe avec le texte 'long text', et placez-le dans App après le champ de saisie.

Dans le composant Text, ajoutez la ligne console.log('text render');. Assurez-vous qu'à la saisie de caractères dans le champ, le composant Text se re-rend à chaque fois.

Maintenant, enveloppez le composant Text dans memo. Assurez-vous qu'à la saisie de caractères dans le champ, le composant Text ne se re-rend pas de manière répétée.