Solución: Too many re-renders en React

¿Por qué ocurre?

React detecta que el componente se re-renderiza infinitamente y lo corta. Las causas más comunes son: llamar a setState directamente en el cuerpo del componente (fuera de un efecto o handler), pasar una función invocada como event handler en lugar de una referencia, o un useEffect que actualiza el estado que tiene en sus dependencias.

Solución paso a paso

Causa 1 — setState en el cuerpo del componente:

// ❌ Bucle infinito: cada render llama a setContador, que lanza otro render
function Contador() {
  const [contador, setContador] = useState(0);
  setContador(1); // ← AQUÍ está el problema
  return {contador};
}
// ✅ Solo actualiza estado en respuesta a eventos o efectos
function Contador() {
  const [contador, setContador] = useState(0);
  return (
    

      {contador}
      
    
  );
}

Causa 2 — Event handler invocado inmediatamente:

// ❌ handleClick() se ejecuta al renderizar, no al hacer click // ✅ Pasa la referencia, no la invocación

// ✅ Si necesitas pasar argumentos, usa arrow function

Causa 3 — useEffect con dependencias que se actualizan a sí mismas:

// ❌ Bucle: el efecto actualiza 'items', que está en dependencias
useEffect(() => {
  setItems([...items, nuevoItem]); // modifica items
}, [items]); // items es dependencia → bucle// ✅ Usa el callback de setState para acceder al valor previo
useEffect(() => {
  setItems(prev => [...prev, nuevoItem]);
}, [nuevoItem]); // solo depende de nuevoItem

Causa 4 — Objeto/array como dependencia de useEffect:

// ❌ El objeto se recrea en cada render, useEffect lo detecta como "nuevo"
useEffect(() => {
  fetchDatos(opciones);
}, [opciones]); // opciones = { page: 1 } se recrea cada render// ✅ Memoriza el objeto con useMemo o mueve la dependencia a primitivos
const opcionesMemo = useMemo(() => ({ page: 1 }), []);
useEffect(() => {
  fetchDatos(opcionesMemo);
}, [opcionesMemo]);

Cómo evitarlo en el futuro

Nunca llames a setState o a funciones que modifiquen estado directamente en el cuerpo del componente. Usa el React DevTools Profiler para ver qué está causando renders. Si pasas objetos o arrays como dependencias de useEffect, memorizalos con useMemo o desglosa las dependencias en primitivos.