Soy nuevo en el uso de React. Intenté hacer un contador sencillo en un functional component, donde uso el hook de useState para aumentar en 1 el valor del contador cada vez que presiono el botón +1. Resulta que llamar a setCounter
directamente al hacer click en el botón de aumentar conduce a un error porque "la página se re-renderiza infinitamente", mientras que llamarlo como callback(o sea, () => setCounter()
) renderiza el componente correctamente, sin caer en un bucle de re-renderizado infinito
import { useState } from "react"
export const CounterApp = () => {
const [counter, setCounter] = useState(10)
return (
<>
<h1>Counter: {counter}</h1>
<hr />
<button onClick={setCounter(counter + 1)}>+1</button> //Uncaught Error: Too many re-renders.React limits the number of renders to prevent an infinite loop.
<button onClick={ () => setCounter(counter + 1)}>+1</button> //Renderiza correctamente
</>
)
}
Quisiera saber por qué ocurre esto del re-renderizado infinito.