import React, {useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import reportWebVitals from './reportWebVitals'; function AppTwo(props){ const [state, setState] = React.useState("initial value"); useEffect(() => { console.log(`useEffect: ${state}`); },[state]); setState("updated value"); console.log(state); return `<h1>${state}</h1>`; } ReactDOM.render( <> <AppTwo /> </>, document.getElementById('root') );Error: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
No llame a setState dentro del cuerpo del componente. Se actualizará cada vez que el componente se vuelva a renderizar. Es por eso que está recibiendo un ciclo infinito de actualizaciones de estado.
¡OBRAS!
import React, {useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import reportWebVitals from './reportWebVitals'; function AppTwo(props){ const [state, setState] = React.useState("initial value"); useEffect(() => { console.log(`useEffect: ${state}`); // document.getElementById('btn').innerHTML = `<h1>State: ${state}</h1>`; },[state]); console.log(state); return ( <> <h1>State: {state}</h1> <button id="btn" onClick={() => {setState('updated value')}}> click </button> </> ) } ReactDOM.render( <> <AppTwo /> </>, document.getElementById('root') );