Considérez la situation:
}, [handleClick, ref, value]);
Ainsi, vous pouvez voir que handleClick utilise ref et value , il doit donc être passé dans le tableau dep de useCallback . Mais qu'en est-il de useEffect ?
Question : Même si j'ai passé ref, value dans le tableau de dépendances dans useCallback , dois-je également le mettre dans le tableau de dépendances dans useEffect ?
Donc au lieu de
}, [handleClick]);
J'aurais
const [value, setValue] = useState(null);
const ref = useRef(null);
const handleClick = useCallback(() => {
if (value) {
ref.current = 'something';
}
}, [ref, value]);
useEffect(() => {
window.addEventListener('click', handleClick);
}, [handleClick]);
Merci!
3 Réponses :
Non.
UseCallback renvoie une valeur mémorisée - qui ne changera pas, vous n'avez donc pas à vous soucier de quoi que ce soit à l'intérieur.
En second lieu, vous n'avez pas besoin de passer ref nulle part, car cela est déjà mémorisé et ne va pas changer.
Cela vaut la peine d'utiliser eslint et de le laisser regarder quelles références sont utilisées, car il indiquera les bonnes à passer :-)
(Pour eslint c'est "react-hooks/exhaustive-deps" react "react-hooks/exhaustive-deps" dans le "eslint-plugin-react-hooks" )
Je n'ai pas besoin de passer ref in useCallback?
Non - il n'est mentionné dans aucun code à l'intérieur, donc ce n'est pas une dépendance - reactjs.org/docs/ ... - cela peut être un peu déroutant de faire des références croisées, mais useCallback permet au fn de passer en toute sécurité! :-)
Non, ce n'est pas nécessaire, car la fonction que vous avez fournie dans useEffect dépend du handleClick qui dépend de ref, value , et dès qu'une de ces variables change, React redéclarera d' handleClick fonction handleClick qui déclenchera la fonction dans useEffect conséquence.
Techniquement, c'est en fait faux dans le flux - handleClick vient de useCallback , donc il ne changera pas réellement le callback fn lui-même, donc useEffect ne sera pas mis à jour - pensez à useCallback comme un petit wrapper qui vous permet de mettre à jour la fonction sans potentiellement faire quelque chose de plus cher avec
Je ne suis pas ici pour discuter, mais je n'ai pas dit que la fonction changera, elle "sera re-déclarée si la valeur ou la référence change" donc déclencher l'effet
C'est un rappel mémorisé - This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders passez des This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders - la référence elle-même ne changera jamais, donc des contrôles d'égalité stricts tels que les dépendances useEffect diront qu'ils sont les mêmes, et ne re -render - par conséquent, tout ce qui est connu en mémoire (le rappel setValue de useState , tout ce qui provient de useRef et useCallback etc.) n'est pas nécessaire en tant que dépendance
Vous aurez besoin de value dans useCallback car la valeur est dans la portée de la fonction mémorisée et vous aurez besoin de handleClick sur useEffect car vous souhaitez utiliser la fonction mise à jour pour la même raison. Vous devez également ajouter une valeur de retour à votre useEffect pour supprimer l'écouteur
Voici uncode Sandbox pour jouer avec les dépendances et vérifier le console.log lorsque vous cliquez dessus