Guide de débutant pour l'utilisation de useMemo dans ReactJS

Bonjour à tous, aspirants développeurs React ! Aujourd'hui, nous allons plonger dans l'un des hooks puissants de React : useMemo. Ne vous inquiétez pas si vous êtes nouveau dans la programmation ; je vais vous guider pas à pas à travers ce concept, comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et embarquons ensemble dans cette aventure passionnante !

Qu'est-ce que useMemo ?

Avant de rentrer dans les détails, comprenons ce qu'est useMemo. Imaginez que vous faites des cookies (j'adore cette analogie parce que, bien sûr, qui n'aime pas les cookies ?). Vous avez une recette qui nécessite des calculs complexes pour déterminer la quantité parfaite de pépites de chocolat. Maintenant, recalculeriez-vous cela à chaque fois que vous faites des cookies, ou écrirez-vous et réutiliserez-vous la recette ? C'est essentiellement ce que fait useMemo - il se souvient (ou "memoise") du résultat d'un calcul pour que vous n'ayez pas à le répéter inutilement.

En termes de React, useMemo est un hook qui vous permet de stocker en cache le résultat d'un calcul entre les re-rendus. C'est comme avoir un assistant super-intelligent qui se souvient des tâches complexes pour vous !

Signature du hook useMemo

Voyons comment nous utilisons réellement le hook useMemo :

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Ne paniquez pas ! Je sais que cela peut sembler un peu effrayant au départ, mais analysons-le :

1. useMemo est le nom de notre hook.
2. Il prend deux arguments :

• Une fonction qui effectue notre calcul (() => computeExpensiveValue(a, b))
• Un tableau de dépendances ([a, b])

3. Il renvoie une valeur memoisée.

Pensez-y de cette façon : useMemo dit, "Eh React, n'exécute cette calcul que si a ou b a changé. Sinon, donne-moi simplement le résultat que tu t'es souvenu de la dernière fois."

Application du hook useMemo

Maintenant, voyons useMemo en action avec un exemple du monde réel. Imaginez que nous construisons un panier d'achats pour une boutique en ligne (parce que qui n'aime pas le shopping en ligne ?).

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "T-Shirt React", price: 20 },
{ id: 2, name: "Hoodie React", price: 40 },
{ id: 3, name: "Casquette React", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Votre Panier d'Achats</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Total: ${totalPrice}</h3>
</div>
);
}

Décomposons cela :

1. Nous avons un panier d'achats avec certains articles, chacun ayant un nom et un prix.
2. Nous utilisons useMemo pour calculer le prix total de tous les articles dans le panier.
3. Le calcul n'est effectué que lorsque le cart change (c'est ce que fait [cart] à la fin).

Pourquoi est-ce utile ? Imaginez que le calcul du total est une opération vraiment complexe (peut-être impliquant des réductions, des taxes, etc.). Sans useMemo, React recalculerait cela à chaque re-rendu, même si le panier n'a pas changé. Avec useMemo, il ne recalculera que lorsque cela est nécessaire, économisant potentiellement beaucoup de temps de traitement !

Préserver les références

Une autre fonctionnalité super-cool de useMemo est sa capacité à préserver les références. "Qu'est-ce que c'est ?" Je vous entends demander. Bien, laissez-moi vous expliquer avec un autre exemple.

Imaginez que vous construisez une application de liste de tâches (parce que chaque programmeur en a déjà construit une à un moment donné, croyez-moi !). Vous voulez filtrer vos tâches en fonction de leur statut.

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Apprendre React", completed: false },
{ id: 2, text: "Créer des applications incroyables", completed: false },
{ id: 3, text: "Changer le monde", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Filtrer les tâches...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2.Ma Liste de Tâches</h2>
<button onClick={() => setFilter('all')}>Toutes</button>
<button onClick={() => setFilter('active')}>Actives</button>
<button onClick={() => setFilter('completed')}>Terminées</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

Dans cet exemple :

1. Nous avons une liste de tâches et un état de filtre.
2. Nous utilisons useMemo pour créer une liste de tâches filtrée en fonction du filtre actuel.
3. La liste filtrée n'est recalculée que lorsque todos ou filter change.

La magie ici, c'est que filteredTodos sera toujours le même objet référence à moins que todos ou filter change. C'est super important pour optimiser les performances, surtout lorsque vous passez cette liste à des composants enfant.

Conclusion

Et voilà, amis ! Nous avons parcouru le territoire de useMemo, de sa concept de base à son utilisation dans des exemples du monde réel. Souvenez-vous, useMemo est comme votre fidèle sidekick, toujours là pour vous aider à optimiser vos applications React en évitant les calculs inutiles.

Voici un tableau de référence rapide des méthodes que nous avons couvertes :

Méthode	But	Syntaxe
useMemo	Memoiser les calculs coûteux	useMemo(() => computation, dependencies)

Comme avec n'importe quel outil en programmation, utilisez useMemo avec sagesse. C'est génial pour optimiser les performances, mais l'utiliser en excès peut rendre votre code plus complexe sans bénéfices significatifs. Comme je le dis toujours à mes élèves, "With great power comes great responsibility !"

Continuez à pratiquer, continuez à construire, et surtout, continuez à vous amuser avec React. Avant de vous en rendre compte, vous serez créer des applications incroyables qui feront dire même aux développeurs chevronnés "Waouh !". Et souvenez-vous, si vous vous sentez bloqué, imaginez que vous expliquez votre code à une canard en caoutchouc. Ça marche, croyez-moi !

Bonne programmation, futurs maîtres de React !

Credits: Image by storyset