0
votes

Pourquoi une fonction nommée passée comme premier paramètre à useEffect n'est-elle pas une dépendance nécessaire?

[Résolu] Je pense que les 2 effets ci-dessous devraient avoir le même effet. Mais pourquoi la règle eslint ne se plaint-elle pas dans le second cas?

Cela devrait être une dépendance obligatoire dans les deux cas car doSomething peut changer et changer l'effet.

  const doSomething = useCallback(() => {
    void someProp;
  }, [someProp]);


useEffect(()=> doSomething(), [doSomething]); // eslint(react-hooks/exhaustive-deps) complains if I remove the dependency
useEffect(doSomething, []); // no complaint here, why?

Edit: Il a été en fait corrigé il y a quelque temps (avant même que j'écrive cette question). https://github.com/facebook/react/pull/18435 p >

reactjs react-hooks

4 commentaires

Ma question n'est pas claire. Qu'est-ce qui vous fait penser que je ne comprends pas le but du deuxième argument?

Je ne comprends pas pourquoi vous utilisez useCallback pour commencer. Pourquoi ne pas utiliser useEffect (() => void 42, [someProp]) pour commencer?

doSomething pourrait être utilisé ailleurs

C'est un argument valide, mais useCallback renvoie un rappel mémorisé. Cela signifie que la fonction de rappel n'est appelée que lorsque les dépendances useCallback changent. Vous pouvez donc faire useEffect (doSomething) qui n'exécute le rappel de useCallback que si les dépendances useCallback changent. Il n'est pas nécessaire de spécifier des dépendances pour useEffect dans ce scénario.

3 Réponses :

0
votes

useEffect ne doit pas renvoyer de valeur, sauf une fonction de nettoyage.

Par exemple:

useEffect(() => {
  return () => {}
}, [])

Et vous utilisez doSomething , qui a été spécifié en dehors du hook, à l'intérieur du hook useEffect .

2 commentaires

Je ne comprends pas comment cela répond à ma question.

La raison pour laquelle es-lint ne s'est pas plaint sur le deuxième exemple est que vous avez passé une fonction en tant que gestionnaire de hook. Mais dans le premier exemple, vous appelez une fonction dans useEffect . Et tout ce qui se trouve à l'intérieur du hook qui est externe au gestionnaire de hook doit être spécifié dans le tableau de dépendances.

0
votes

Le deuxième argument de useEffect est le tableau de dépendances, dans lequel vous pouvez décrire que l'effet doit s'exécuter si les valeurs données sont modifiées. Dans votre deuxième cas, la fonction doSomething n'est pas quelque chose que l'effet utilise , mais c'est la fonction d'effet elle-même .

Si vous l'utilisez dans votre fonction d'effet, eslint vous en informera.

useEffect(() => {
  doSomething();
}, []);

1 commentaires

L'effet utilise cette fonction, si la fonction change, nous ne devons pas sauter l'effet. Je pense qu'eslint devrait nous avertir.

0
votes

Il a en fait été corrigé il y a quelque temps (avant même que j'écrive cette question).

https://github.com/facebook/react/pull/18435

L'eslint-pluging-react-hook avertira correctement dans les deux cas.

0 commentaires