Quand utiliseriez-vous useMemo plutôt que useCallback, et quand vous passeriez-vous des deux ?

useMemo met en cache une valeur calculée entre les rendus ; useCallback met en cache une référence de fonction. C'est le même mécanisme, puisque useCallback(fn, deps) équivaut à useMemo(() => fn, deps). Sortez-les quand une valeur est réellement coûteuse à calculer, ou quand une référence est une dépendance d'effet ou une prop passée à un enfant mémoïsé. Passez-vous des deux pour les valeurs bon marché, parce que la comptabilité interne n'est pas gratuite.

C'est le même outil avec deux casquettes. useMemo met en cache une valeur, useCallback met en cache une fonction, et sous le capot useCallback n'est qu'un useMemo qui renvoie cette fonction. Je ne sors l'un ou l'autre que pour deux raisons. Un, le calcul est réellement coûteux, comme trier et grouper quelques milliers de lignes. Deux, l'identité de la chose compte, parce que c'est une dépendance d'un effet ou une prop qui part vers un composant enveloppé dans React.memo. Si aucune des deux n'est vraie, je laisse tomber, parce que chaque appel de mémo coûte quand même une comparaison et un peu de mémoire, et ça rend le code plus bruyant à lire. Ce que je fais vraiment en premier, c'est ouvrir le React Profiler et vérifier si ce re-rendu coûte quoi que ce soit. La plupart du temps, le vrai correctif n'est pas un mémo, c'est de rapprocher l'état de l'endroit où il est utilisé pour que la moitié de l'arbre arrête de se rendre. Et sur les projets récents avec le React Compiler activé, une bonne partie de cette mémoïsation manuelle disparaît, ce qui me va très bien ; le code se lit mieux sans.