Quelle est la principale différence entre useCallback et useMemo ? Et quand utiliser useCallback de React Hooks?
3 Réponses :
useMemo aide à empêcher le re-rendu à moins que les dépendances à une fonction aient changé tandis que useCallback aide à empêcher le re-rendu à moins qu'une fonction n'ait changé. Par exemple, lorsqu'une fonction doit être passée comme argument à une autre fonction, useCallback n'autorisera le re-rendu qu'une fois qu'une fonction différente est passée. Voici un lien vers une ressource qui pourrait aider à expliquer davantage
https://btholt.github.io/complete-intro-to-react-v5/hooks-in-depth
Ce n'est pas tout à fait correct. useCallback ne vérifie pas si la fonction a changé (car elle sera déclarée sur chaque rendu et sera toujours un objet différent), et elle accepte également un tableau de dépendances, tout comme useMemo .
const getFullName = useCallback(() => firstName + lastName, [firstName, lastName]);
useMemo et useCallback utilisent tous les deux quelque chose qui s'appelle la mémorisation, auquel vous pouvez penser comme si les hooks se souviennent de quelque chose.
Les différences:
useMemo mémorisera / se souviendra de la valeur renvoyée par la fonction que vous lui passez jusqu'à ce que les dépendances changent.
const a = () => {}
a === a // This is true
useCallback mémorisera / se souviendra de la fonction réelle que vous lui passez jusqu'à ce que les dépendances changent, ce qui vous donne quelque chose appelé égalité référentielle .
() => {} === () => {} // This is false
Égalité référentielle:
const num = 10 const result = useCallback(() => num + num, [num]) // result is now equal to () => num + num. // result === result between renders.
const num = 10 const result = useMemo(() => num + num, [num]) // result is now equal to 20
Source: Quelle est la différence entre useMemo et useCallback?
Possible duplication de Quelle est la différence entre useCallback et useMemo en pratique?