Le Hook d'optimisation des performances useMemo dans React

Le premier Hook d'optimisation des performances que nous allons examiner est useMemo.

Ce Hook aide à mettre en cache les résultats d'opérations coûteuses en ressources entre les moments de rendu et peut ainsi aider à éviter des calculs volumineux inutiles. Cette mise en cache est également appelée mémorisation.

Voyons comment cela fonctionne. Créons un composant avec un bouton et un titre h3 :

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Maintenant, faisons en sorte qu'un clic sur le titre change sa couleur de l'orange au vert et vice versa. Pour commencer, définissons un état isGreen :

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

Ajoutons une condition de changement de couleur dans l'attribut style du titre et ajoutons un gestionnaire de clic :

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

Supposons que nous ayons également une valeur qui augmente de un à chaque clic sur notre bouton. Créons un état pour celle-ci :

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

Ajoutons la gestion du clic sur le bouton :

<button onClick={() => setNum(num + 1)}>
	clics
</button>

Supposons également que nous ayons une fonction square qui renvoie le carré de la valeur num. Nous enregistrerons le résultat de l'appel de la fonction dans une variable result :

const result = square(num);

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

Affichons result dans le texte du bouton :

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

Le résultat est le suivant : un clic sur le bouton change la valeur de num, qui est ensuite élevée au carré, et un clic sur le titre change la couleur du titre.

Notre composant est très petit, tout fonctionne vite, même si un clic sur le titre pour changer sa couleur provoque un nouveau rendu de tout le composant, et par conséquent, les calculs liés au bouton sont également refaits, et ce même si nous ne l'avons pas touché. Maintenant, imaginez si nos calculs étaient volumineux et que tout était recalculé à chaque fois.

Alourdissons un peu notre fonction, maintenant elle va "réfléchir" un peu plus longtemps. Ainsi, nous simulerons des calculs longs :

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Ne rien faire ...
	}
	
	return num * num;
}

Maintenant, cliquez sur le titre. Il se trouve que maintenant, à cause du long travail de la fonction square (et pourtant nous ne touchons pas au bouton !) nous devons attendre une éternité pour que la couleur du titre change !

C'est ici que le Hook useMemo vient à notre rescousse. Pour cela, nous devons lui passer en premier paramètre une fonction calculant la valeur que nous voulons mettre en cache. Cette fonction doit être pure et ne prendre aucun paramètre. Et en second paramètre - les dépendances dans des crochets, en d'autres termes, toutes les valeurs réactives utilisées dans le code de la fonction. Ainsi, dans result nous écrirons maintenant une telle construction :

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

Cliquons à nouveau sur le titre. Maintenant, si nous ne touchons pas au bouton avec les calculs et ne changeons pas ainsi la valeur de l'état num, alors rien n'est recalculé, et React affiche la valeur mise en cache dans le bouton, donc notre titre change rapidement de couleur.

Créez un composant App, placez-y un paragraphe. Définissez un état text avec la valeur initiale 'react', laissez la valeur de l'état s'afficher comme texte du paragraphe. Faites en sorte qu'un clic sur le paragraphe ajoute un point d'exclamation à la fin du texte.

Définissez un autre état num, avec la valeur initiale 0. Placez dans App un autre paragraphe. Faites en sorte qu'un clic dessus augmente num de 1.

Maintenant, ajoutez à App une fonction triple, qui prend comme paramètre num et renvoie sa valeur triplée. Placez le résultat de l'appel de la fonction dans une variable result. Affichez result comme texte du deuxième paragraphe. Cliquez tour à tour sur les paragraphes, remarquez comme les points d'exclamation s'ajoutent lentement.

Corrigez la situation en enveloppant la fonction lente triple dans useMemo.