React.js: comment corriger l'erreur de dépendance lors de l'utilisation de useEffect ?

Les Hooks sont une nouveauté introduite dans la version 16.8 du framework JavaScript React. Ils facilitent l'écriture du code et permettent de regrouper la gestion de certaines fonctionnalités de votre application, auparavant éparpillées dans différents évènements. Parmi ces Hooks, "useEffect()" permet de regrouper des directives qui seraient normalement placées dans les méthodes "componentDidMount()", "componentDidUpdate()" et "componentWillUnmount()". Il faut par contre faire attention à l'utilisation du code, car on peut obtenir le message d'avertissement "missing dependency warning".

Cet avertissement se produit lorsqu'une méthode est appelée dans le Hook "useEffect()", mais qu'elle est définie en dehors du Hook et n'est pas transmise comme dépendance. Ce message provient du plugin "eslint-plugin-react-hooks" qui vérifie la syntaxe du code écrit dans les Hooks.

//Ce code déclenchera l'apparition du message d'avertissement
useEffect(() => {
    maMethode(),
  }, []),

const maMethode = () => {
    return fetch("uneURL", {method: "GET"}
    )
      .then(res => {
        return res.json(),
      })
      .then(json => {
        // Traitement
      })
      .catch(err => {
        // Gestion des erreurs
      }),
  },

Si votre méthode n'est utilisée qu'une seule fois dans votre code, alors il vous suffit de déplacer le code de la méthode directement dans le Hook "useEffect()". Le message d'erreur va disparaître et votre application fonctionnera normalement.

useEffect(() => {
    //On définit la méthode
    const maMethode = () => {
       return fetch("uneURL", {method: "GET"}
    )
      .then(res => {
        return res.json(),
      })
      .then(json => {
        // Traitement
      })
      .catch(err => {
        // Gestion des erreurs
      }),
  },
  //On l'appelle juste après
  maMethode(),
}, []),

Si vous ne pouvez pas déplacer le code, alors il faut le modifier pour qu'il devienne une dépendance que vous passerez au Hook. Pour cela, déplacez le code de la méthode dans un appel à la fonction "useCallback()", afin qu'il soit déclenché à chaque changement d'un paramètre de la fonction "useEffect()". Ajoutez ensuite la fonction en tant que dépendance.

//La méthode contient maintenant un appel vers la fonction useCallback()
const maMethode =  useCallback(() => {
       return fetch("uneURL", {method: "GET"}
    )
      .then(res => {
        return res.json(),
      })
      .then(json => {
        // Traitement
      })
      .catch(err => {
        // Gestion des erreurs
      }),
  }, []),

//Appel de useEffect() avec la dépendance
useEffect(() => {
    maMethode(),
  }, [maMethode]),

Il existe également une autre solution : désactiver l'avertissement donné par le plugin. Il vous suffit pour cela de rajouter la directive "eslint-disable-line react-hooks/exhaustive-deps" en commentaire après l'appel du Hook "useEffect()". Cette méthode masque le souci, mais ne le résout pas et cela peut vous poser un problème dans votre application plus tard. Il faut donc bien faire attention quand on opte pour cette solution.

useEffect(() => {
  maMethode()
}, []) // eslint-disable-line react-hooks/exhaustive-deps