Tengo un problema. Estoy desarrollando una aplicación nextJS . React renderiza mis componentes dos veces. Sé que es por StrictMode . Pero en el documento React y nextJS encontré que nos sugieren enfáticamente que usemos StrictMode . Pero en una parte de mi aplicación en la que estoy trabajando, uso useEffect y quiero que algunos códigos en useEffect se ejecuten solo una vez, ¡no dos veces! Porque ejecutar códigos allí dos veces, crea un error malo. Entonces, ¿cómo puedo hacer eso? ¿Cómo puedo hacer algo para que la reacción ejecute algunos códigos en useEffect una vez? ¡Y coloqué [] como una dependencia de useEffect pero no funcionó! Por ejemplo algo como esto:
`//inside a component that is a child of React.StrictMode useEffect(() => { /* strict mode cuses adding something to body twice. I want to add it just once and without using cleanup function */ document.body.appendChild(something) //it runs twice, too. I dont want it! console.log('test') }, []) `¡Gracias por ayudar!
La recomendación general es que cada efecto debe devolver una función de "limpieza", y el efecto inicial + limpieza debe ser no operativo (y, por lo tanto, efecto->limpieza->efecto = efecto). En su caso, podría eliminar el nodo DOM adjunto en la limpieza:
useEffect(() => { const node = document.body.appendChild(something) return () => document.body.removeChild(node); }, [])El objetivo del modo estricto es detectar problemas como este para futuras versiones de React donde los efectos pueden ejecutarse dos veces en casos extraños (React puede desmontar y volver a montar el componente, y aparecería el error).
¿Qué sucede si hace que algo dependa de la función useEffect para que solo se ejecute cuando ese 'algo' cambie? Desafortunadamente, renderizar dos veces para eliminar los efectos secundarios es lo estricto que funciona el modo y no hay una buena manera de evitarlo. Realmente no siempre lo uso, aunque se recomienda, y soy un gran usuario de nextjs.