Este error es lanzado por React cuando un componente entra en un bucle de renderizado infinito. React lo detecta contando los renders y deteniendo la ejecución después de un umbral. Siempre es causado por una actualización de estado que se dispara incondicionalmente durante la propia fase de renderizado.
Por qué ocurre
- •Llamar a un setter de estado (por ejemplo setState) directamente en el cuerpo del componente en lugar de dentro de un manejador de eventos o useEffect.
- •Pasar una llamada de función como prop de evento (por ejemplo onClick={handleClick()}) en lugar de una referencia a función (onClick={handleClick}).
- •Un useEffect con un array de dependencias que cambia en cada render, haciendo que el efecto se dispare repetidamente.
- •Derivar nuevos valores de objeto o array dentro del render y pasarlos como dependencias a useEffect o useMemo sin memorización.
Ejemplos
Código que causa el error
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
// calling setState directly during render triggers infinite re-renders
setCount(count + 1);
return <div>{count}</div>;
}Error en la terminal
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Cómo solucionarlo
Mueve todas las actualizaciones de estado a manejadores de eventos o useEffect. Al pasar manejadores a props de eventos, siempre pasa una referencia a función o una arrow function, nunca una llamada de función. Usa el Profiler de React DevTools para identificar qué componente se está rerenderizando en exceso.
Código corregido
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
// Move state updates into an event handler, not directly in the render body
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}Código que causa el error
import { useState } from "react";
function Toggle() {
const [open, setOpen] = useState(false);
// passing the result of setOpen instead of a callback
return <button onClick={setOpen(true)}>Open</button>;
}Error en la terminal
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Cómo solucionarlo
Mueve todas las actualizaciones de estado a manejadores de eventos o useEffect. Al pasar manejadores a props de eventos, siempre pasa una referencia a función o una arrow function, nunca una llamada de función. Usa el Profiler de React DevTools para identificar qué componente se está rerenderizando en exceso.
Código corregido
import { useState } from "react";
function Toggle() {
const [open, setOpen] = useState(false);
// wrap in an arrow function so it only fires on click
return <button onClick={() => setOpen(true)}>Open</button>;
}Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis