Dépendances vides avec useMemo ou useCallback VS useRef

Dans ce numéro de GitHub, j'ai proposé essentiellement de changer:

x = useCallback( ... , []);

À:

x = useRef( ... ).current;

Les deux sont identiques mais avec useRefReact ne compare pas les dépendances.

Pour lequel une réponse est venue avec une question:

Y a-t-il jamais une situation où un useMemo sans dépendance ou useCallback serait un meilleur choix que useRef?

Je ne peux pas penser à un, mais j'ai peut-être ignoré certains cas d'utilisation.

Alors, quelqu'un peut-il penser à une telle situation?

reactjs react-functional-component

— Izhaki
source

Réponses:

Documentation de l'API Per React Hooks:

Gardez à l'esprit que useRef ne vous avertit pas lorsque son contenu change. La mutation de la propriété .current ne provoque pas de nouveau rendu ... L'utilisation d'une référence de rappel garantit que même si un composant enfant affiche le nœud mesuré plus tard (par exemple en réponse à un clic), nous en sommes toujours informés dans le parent composant et peut mettre à jour les mesures.

Vous pouvez en savoir plus ici et ici .

— irasuna
source

Je suppose que cela répond à la question, mais je pense que c'est incorrect. Dans l'exemple de Sandbox React, la modification useCallback(x,[])en useRef(x)fonctionne de la même manière.

— Izhaki

useRef(x).currentC'est.

— Izhaki

J'espère que je me trompe, mais j'ai expliqué

— Izhaki

Je ne suis pas tout à fait sûr au sujet de useCallback(cb, [])vs useRef(cb).currentmoi - même. Bien que, useMemo(cb, [])soit différent useRef(cb).currenten un sens useMemo, "ne recalculera la valeur mémorisée que lorsque l'une des dépendances a changé". Versus useRefqui recalcule toujours la valeur quoi qu'il arrive.

— irasuna

useRefne recalcule jamais - il renvoie toujours la valeur initiale.

— Izhaki

Bien que vous puissiez utiliser useRef pour émuler useCallback ou avec une dépendance vide, vous ne pouvez pas l'utiliser pour tous les scénarios possibles de useCallback qui consiste à se remémorer lorsque l'une des dépendances change.

De plus, cela ne fera pas beaucoup de différence de performance si vous utilisez useCallback with empty dependencyou useRef car il n'a pas à effectuer de comparaison lourde.

De plus, si vous modifiez un peu l'implémentation de la fonction pour la recréer lors d'un changement de paramètre particulier, vous pouvez simplement mettre à jour l'implémentation avec useCallbacket ajouter le paramètre supplémentaire en tant que dépendance. Cependant, si vous l'implémentez avec useRef, vous devez revenir àuseCallback

— Shubham Khatri
source

Merci. Comme le titre le suggère, il s'agit d'un cas de dépendances strictement vide.

— Izhaki

@Izhaki Je comprends que votre question concerne les dépendances strictement vides et c'est pourquoi j'ai mentionné qu'il n'y a aucune différence en cas de dépendance vide. Mais quand vous essayez d'ajouter plus de changements, il vous faudra peut-être un peu de refactor

— Shubham Khatri

Parce que la sortie de useRef (() => {...}). Current est modifiable.

Ce qui peut provoquer des effets secondaires étranges dans votre code. Je peux modifier la valeur du courant à tout moment. https://codesandbox.io/s/confident-monad-vjeuw

Ce serait le cas d'utilisation pour ne pas vouloir utiliser useRef

— Daniel Duong
source

Mais x = useRef(value).currentne retourne jamais une instance mutable - refn'est jamais retourné; currentest. C'est la même chose qu'avec la useCallbackversion.

— Izhaki