Lingua-e
JavaScript

¿Qué significa Cannot Update During Rendering?

← Errores

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.

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ómo solucionarlo

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.

Código corregido

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

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