Que fait useMemo ? Quand l'utiliser ? Faut-il envelopper un composant enfant dans React.memo ?

useMemo — c’est un hook dans React qui permet de mémoriser (mettre en cache) le résultat d’une fonction pour éviter des recalculs inutiles lors du rerendu du composant.

Il faut utiliser useMemo lorsque vous avez des calculs coûteux en ressources ou des objets complexes qui ne doivent pas être recréés inutilement.

Exemple :

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

Ici, computeExpensiveValue ne sera appelé que si a ou b changent.

Concernant React.memo — c’est un HOC qui mémorise le composant lui-même, évitant son rerendu si les props ne changent pas.

Il faut envelopper le composant enfant dans React.memo si :

• le composant se rend fréquemment,
• et que les props ne changent pas,
• et que le rerendu du composant est coûteux.

En résumé :

• useMemo optimise les calculs internes du composant,
• React.memo optimise le rerendu des composants enfants.

Les deux outils peuvent être utilisés ensemble pour améliorer la performance, mais leur utilisation doit être justifiée pour ne pas compliquer le code.