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
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