Soy nuevo en reaccionar. He creado dos archivos App.js y UseEffect.js. Estoy aprendiendo sobre el ciclo de vida en reaccionar con la función. Entonces, cuando veo en la consola, se procesa varias veces. Puedes ver mi foto a continuación.
Este es mi código
UseEffect.js
import React, {useState, useEffect} from "react"; function MyFunction(){ console.log('-> Function Init') const [count, setCount] = useState(0) const handleCount = () => { setCount(prevState => { return prevState+1 }) } //LifeCycle useEffect(() => { console.log('my first effect') }) console.log(`-> Start Render (${count})`) return( <div> <h1>Function Component</h1> <p> <button onClick={handleCount}>Count</button> {count} </p> </div> )} export default MyFunctionAplicación.Js
import './App.css'; import UseEffect from './components/UseEffect' function App() { return ( <div className="App"> <UseEffect /> </div> ); } export default App;¿Cómo funciona?, lo quiero. es solo renderizar una vez.
A su llamada useEffect le falta una matriz de dependencia. Cuando desee que se ejecute solo en el renderizado inicial, debe pasarle una matriz vacía como sus dependencias.
useEffect(() => { console.log('my first effect') }, [])Para obtener más detalles, consulte esta pregunta .
Por qué se renderiza dos veces:
Es una característica intencional de StrictMode. Esto solo sucede en el desarrollo y ayuda a encontrar efectos secundarios accidentales en la fase de renderizado. Solo hacemos esto para componentes con ganchos porque es más probable que tengan efectos secundarios accidentalmente en el lugar equivocado.
TLDR: es una característica, no un error.