Erreur bizarre avec React et les hooks useEffect

[sofiane_dev]

Je me bats depuis 2h avec un useEffect qui se lance en boucle infinie alors que mon tableau de dépendances est vide ! Code : useEffect(() => { console.log('BUG') }, []). HELP !

[codeur1974]

T'es sûr que t'as bien React 18+ ? Y'a eu des changements sur le double rendering en mode dev. Essaie de mettre un if (process.env.NODE_ENV === 'development') return; au début.

[sofiane_dev]

Oui je suis en React 18.2. Ton astuce marche pas, ça skip complètement l'effet même en prod. J'ai remarqué que ça arrive que quand j'utilise ce hook dans mon composant parent...

[guillaume92]

Ça sent le Strict Mode activé. Vérifie ton index.js : si t'as <React.StrictMode> autour de ton App, ça explique le double render. C'est normal et voulu pour détecter les effets impurs.

[sofiane_dev]

PUT*** t'as raison ! J'avais pas fait gaffe au Strict Mode. Du coup c'est un comportement normal ? Je devrais laisser comme ça ou le désactiver ?

[codeur1974]

Laisse le activé ! C'est fait pour te faire prendre de bonnes habitudes. Si ton effet supporte pas le double render, c'est qu'il y a un problème dans ta logique quelque part.

[guillaume92]

Exactement. Le Strict Mode est ton ami. Si ton effet doit vraiment tourner une seule fois, utilise une ref comme flag, mais 99% du temps faut revoir la logique du composant.