JavaScript

Qué significa Cannot Update During Rendering y cómo solucionarlo

Referencia del error

Cannot Update During Rendering

Lenguaje

JavaScript

Severidad

Media

Cuándo ocurre

React advierte cuando el setState de un componente se activa mientras otro componente está en medio de su fase de renderizado.

Posibles soluciones

Mueve cualquier actualización de estado que deba ocurrir como efecto secundario del renderizado a un hook useEffect. Solo llama a setState en manejadores de eventos o useEffect, nunca en el cuerpo de renderizado de un componente.

Errores relacionados

Too many re-renders Invalid Hook Call Rendered Fewer Hooks Than Expected

Más detalles

React advierte cuando el setState de un componente se activa mientras otro componente está en medio de su fase de renderizado. React procesa un componente a la vez durante el renderizado, y llamar a setState desde el renderizado de otro componente crea una cascada que React no puede manejar sincrónicamente.

Por qué ocurre

•Llamar a la función actualizadora de estado de un padre directamente dentro del cuerpo de renderizado de un hijo.
•Activar efectos secundarios (incluidas actualizaciones de estado) durante el renderizado en lugar de en useEffect.
•Un prop de callback siendo llamado sincrónicamente dentro de JSX.

Posibles soluciones

Mueve cualquier actualización de estado que deba ocurrir como efecto secundario del renderizado a un hook useEffect. Solo llama a setState en manejadores de eventos o useEffect, nunca en el cuerpo de renderizado de un componente.

Ejemplos

JavaScript

Código que causa el error

function Parent() {
  const [count, setCount] = useState(0);
  return <Child onMount={() => setCount(1)} />;
}

function Child({ onMount }) {
  onMount(); // called during render, triggers parent state update
  return <div>Child</div>;
}

Error en la terminal

Warning: Cannot update a component (Parent) while rendering a different component (Child).

Código corregido

function Child({ onMount }) {
  useEffect(() => {
    onMount(); // runs after render, safe
  }, [onMount]);
  return <div>Child</div>;
}

Practica en inglés

¿Cómo le explicarías un Cannot Update During Rendering 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