react · JavaScript
El mensaje
Too many re-renders. React limits the number of renders to prevent an infinite loop.
Qué significa
Un render cambió el estado, ese estado provocó otro render, y React cortó el ciclo para evitar uno infinito. Casi siempre es una función invocada donde debía pasarse: onClick={setOpen(true)} se ejecuta en cada render, y tiene que ser onClick={() => setOpen(true)}. Las otras formas habituales son cambiar el estado directamente en el cuerpo del render, y un useEffect cuya lista de dependencias contiene el valor que él mismo actualiza. Mueve los cambios de estado a un manejador de eventos o a un useEffect, y si el valor se puede calcular durante el render, pregúntate si necesita ser estado.
El arreglo
No hay un comando de una línea. La explicación dice qué revisar.
- Lo imprime
- react
- JavaScript
- 15
Los errores del navegador y de Node suelen decirte qué se rompió y no por qué el valor llegó a ser así —leíste undefined, no era una función, no era JSON—, así que el lugar del arreglo está aguas arriba de la línea que lanzó el error, y silenciar solo esa línea con ?. y valores por defecto hace que el mismo problema reaparezca más lejos y con una forma más difícil de reconocer.
Cómo leer un mensaje de error
- Lee desde la primera línea. Cuanto más abajo, más son las tripas de la herramienta; la causa suele estar arriba.
- Si hay un archivo y un número de línea, empieza ahí: no el marco superior de la pila, sino la línea más alta que nombre un archivo tuyo.
- Busca el mensaje literal, pero quita antes tus rutas y nombres de variables: eso es lo que impide que la búsqueda coincida.
- La misma condición se redacta distinto según la versión. Si los resultados no cuadran, añade el número de versión.
- Antes de pegar un arreglo, comprueba qué descarta. Algunos no se pueden deshacer.
Preguntas frecuentes
Q. ¿Qué significa «Too many re-renders. React limits the number of renders to prevent an infinite loop.»?
Un render cambió el estado, ese estado provocó otro render, y React cortó el ciclo para evitar uno infinito. Casi siempre es una función invocada donde debía pasarse: onClick={setOpen(true)} se ejecuta en cada render, y tiene que ser onClick={() => setOpen(true)}. Las otras formas habituales son cambiar el estado directamente en el cuerpo del render, y un useEffect cuya lista de dependencias contiene el valor que él mismo actualiza. Mueve los cambios de estado a un manejador de eventos o a un useEffect, y si el valor se puede calcular durante el render, pregúntate si necesita ser estado.
Q. ¿Cómo se arregla?
No hay comando de una línea. La explicación de arriba dice qué revisar.
Q. ¿Qué herramienta lo imprime?
react. Está en JavaScript y el mensaje tiene 14 palabras.