JavaScript

Qué significa Too many re-renders y cómo solucionarlo

Referencia del error

Too many re-renders

Lenguaje

JavaScript

Severidad

Crítica

Cuándo ocurre

Este error es lanzado por React cuando un componente entra en un bucle de renderizado infinito.

Posibles soluciones

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.

Errores relacionados

Maximum call stack size exceeded TypeError

Más detalles

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.

Posibles soluciones

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.

Ejemplos

JavaScript

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ó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>
  );
}

JavaScript

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ó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>;
}

Practica en inglés

¿Cómo le explicarías un Too many re-renders a un compañero dev? Elige la frase correcta:

"I hit an error...

¿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