1

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.

1 respuesta 1

3

Esto ocurre por que en el evento onClick de tu boton estas directamente ejecutando la funcion setCounter(), por lo que cuando se renderiza tu componente se ejecuta de inmediato setCounter(counter + 1) que a su vez ejecuta otra vez el renderizado del componente al modificarse tu counter y asi infinitamente.

En cambio en tu segundo boton estas entregando la declaracion de una funcion al evento onClick sin ejecutarla, por lo que esta se ejecutara solo al ejecutarse el evento onClick de tu boton.

Saludos.

Lectura recomendada: https://es.reactjs.org/docs/handling-events.html

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.