useMemo semble devoir mettre en cache "la même valeur", mais React ne compare pas la signification commerciale. Il compare l'identité des dépendances. Si un tableau ou un objet est recréé à chaque rendu, useMemo considèrera une nouvelle dépendance et recomputera de toute façon.
C'est pourquoi tant de tentatives de mémorisation ne donnent rien de mesurable.
L'Erreur Commune
Cela semble correct :
const sorted = useMemo(() => expensiveSort(items), [items]);
Mais si le parent reconstruit items à chaque fois :
<Dashboard items={[...rawItems]} />
la mémorisation ne tient jamais vraiment. L'enfant est correct. L'entrée est instable.
Où useMemo Est Réellement Bénéfique
La mémorisation vaut généralement la peine lorsque l'une de ces conditions est vraie :
- le calcul dérivé est coûteux
- la valeur est transmise dans un sous-arbre mémorisé
- la stabilité référentielle affecte le comportement de rendu en aval
Elle n'en vaut généralement pas la peine pour de minuscules calculs qui existent uniquement pour donner l'impression que le code est optimisé.
Le Meilleur Modèle Mental
Une bonne mémorisation commence en amont. D'abord, stabilisez les entrées ou cessez de recréer des structures de données inutilement. Ensuite, profilez. Ensuite, ajoutez useMemo uniquement là où cela réduit le travail réel.
Cela a encore plus d'importance à mesure que les outils React évoluent. Le compilateur React peut automatiser certains chemins d'optimisation, mais cela ne supprime pas le besoin de comprendre l'identité et le flux de données.
Règle Pratique
Ne ajoutez pas useMemo simplement parce qu'une valeur est "dérivée". Ajoutez-le parce que le profiling montre que le coût de recomputation ou de re-rendu en aval vaut la peine d'échanger contre la complexité supplémentaire.
Lectures Supplémentaires