Lingua-e
JavaScript

What is a Cannot Update During Rendering?

← Errors

React warns when a component's setState is triggered while another component is in the middle of its render phase. React processes one component at a time during rendering, and calling setState from another component's render creates a cascade that React cannot handle synchronously.

Why it happens

  • •Calling a parent's state updater function directly inside a child's render body.
  • •Triggering side effects (including state updates) during render instead of in useEffect.
  • •A callback prop being called synchronously inside JSX.

Examples

JavaScript

Code that triggers the 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 output

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

How to fix it

Move any state updates that should happen as a side effect of rendering into a useEffect hook. Only call setState in event handlers or useEffect, never in the render body of a component.

Fixed code

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

Related errors

Ready to practice your English at work?

Lingua-e has interactive exercises built around real developer conversations: standups, code reviews, retrospectives, and more. Practice until it comes naturally.

Try Lingua-e for free