El código a continuación no debería activar una nueva representación porque está pasando el mismo valor inicial, ¿verdad? Pero, en cambio, provoca el error "Demasiados renderizados".
function Test() { const [counter, setCounter] = useState(0) setCounter(0) return <></> }Editar: si configura Contador (0) en una función y lo adjunta a un clic de botón, no activará una nueva representación ya que tiene el mismo valor, entonces, ¿por qué desencadena una nueva representación cuando se coloca en el cuerpo del componente? ? Soy consciente del useEffect con una matriz de dependencia vacía para evitar el ciclo infinito.
Si haces esto, verás que no se vuelve a renderizar:
function Test() { const [counter, setCounter] = useState(0) console.log('render'); const set = () => { setCounter(0) }; return <button onClick={set}>Set</button> }En React, no importa si está actualizando el mismo valor o no. Si actualiza el estado, volverá a representar el componente.
En su caso, tiene SetState en el cuerpo del Componente. Por lo tanto, se volverá a representar y causará un bucle infinito.
Si solo desea actualizar una vez, use useEffect en su lugar.
useEffect(() => { setCounter(0) },[])Si actualiza el estado directamente dentro de su método de representación o el cuerpo de un componente funcional, provocará un bucle infinito.
Actualizaciones de estado → activa la nueva renderización → actualizaciones de estado → activa la nueva renderización → …
Puedes echarle un vistazo a este artículo