Cannot update a component while rendering another component

What is Cannot update a component while rendering another component?

This warning occurs when a component executes a function that updates the state of another component (usually a parent component via callback props) during its own render phase. React enforces unidirectional data flow and blocks side-effects from running during rendering.

Common Causes

• Calling parent state setters directly inside the body of a rendering child component.
• Triggering context updates inside child component definitions.

Common Mistakes

• Updating Context variables unconditionally inside child component render methods.

How to Fix

Framework-Specific Examples

No framework examples required for this informational status.

function Child({ onRender }) {
  onRender(); // parent setter called during child rendering
  return <div>Child</div>;
}

import { useEffect } from 'react';

function Child({ onRender }) {
  useEffect(() => {
    onRender(); // called safely after mount/render phases complete
  }, [onRender]);

  return <div>Child</div>;
}

Best Practices

• Verify child components only read properties during rendering and trigger modifications inside effects or actions.

Frequently Asked Questions (FAQ)