En Next-JS, UseEffect() se ejecuta dos veces. Escuché que necesitas poner una matriz vacía como segundo argumento para arreglar esto en React. En mi caso, en Next-JS, esto no funciona. (Hasta donde yo sé, Next-JS se basa en React).
Encontré una forma: en next.config.js set reactStrictMode: false. Y funciona, el UserEffect se llama una vez.
Pero este método no me conviene, porque. Necesito usar el modo estricto de React.
_app.js:
import '../styles/globals.css'; import React, { useEffect, useState, useRef } from 'react'; function MyApp({ Component, pageProps }) { if (typeof window !== "undefined") { useEffect(() => { console.log('Component Did Mount') //called twice :c }, []) return <Component {...pageProps} /> } export default MyAppReact.StrictMode se usa para ayudar durante el desarrollo, entonces, ¿por qué le preocupa la doble ejecución? Por cierto, las reglas de los ganchos dicen que no puedes colocar un gancho dentro de un bucle o una declaración if.