React Hooks : useEffect() est appelé deux fois même si un tableau vide est utilisé comme argument, comment faire ?

Le framework JavaScript React est aujourd'hui un framework très utilisé dans le monde JavaScript. Il est notamment utilisé par le réseau social Facebook. Il fonctionne avec un système de composants qui permettent d'agencer votre page. Chaque composant a son cycle de vie et peut être rechargé indépendamment. Ce système permet de créer des pages web dynamiques. Afin de manipuler plus facilement les états de composants, les Hooks ont été développés. Ils permettent d'éviter de créer une classe à chaque changement d'état.

Parmi ces Hooks, le Hook "useEffect" permet d'implémenter des effets de bord sur les composants. Si vous pensez que votre Hook est appelé plusieurs fois, vous pouvez utiliser la fonction "console.log" dans le code de la fonction pour le confirmer.

useEffect(()=>{
      /* Code votre fonction */
      console.log('appel de useEffect');
},[]);

Si le message apparaît plus d'une fois, alors la méthode "useEffect()" est bien appelée plusieurs fois.

La première chose à vérifier est logique mais indispensable. Vous devez examiner votre page web et vérifier que le composant n'apparaît pas plusieurs fois. La deuxième possibilité est qu'un composant qui contient votre composant est enlevé puis remis dans le DOM. Cela va alors déclencher le même effet pour tous les composants enfants. Vous devez remonter la chaîne de vos composants jusqu'à ce que vous trouviez celui qui ne s'affiche qu'une seule fois. C'est le composant juste en dessous qui est la cause du souci. Vous devez ensuite rechercher et corriger le problème qui cause le retrait puis le rajout de ce composant.

Il existe également une autre cause possible. React possède un mode de fonctionnement appelé "StrictMode". Lorsqu'il est activé, les composants se montent 2 fois en mode développement, afin de détecter qu'il n'y a pas de problème dans votre code. Vous pouvez ne pas vous en apercevoir si vous avez utilisé un outil pour créer le squelette de votre application, par exemple "create-react-app". Il est possible de vérifier dans votre code en regardant le fichier "index.js". Si la balise "React.StrictMode" est présente, alors le mode est activé.

ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

Dans ce cas, si votre composant se répète donc 2 fois, c'est normal. Si c'est plus, alors vous devez vérifier et modifier votre code. Cela peut vouloir dire que vous utilisez mal "useEffect()" et que vous devez utiliser une autre méthode pour faire ce que vous souhaitez. Si vous souhaitez désactiver le mode strict de React, vous devez juste retirer la balise "React.StrictMode" de votre code.

ReactDOM.render(
       {app},
    document.getElementById('root')
  );