Cannot Update a Component While Rendering Another: The Fix

Cannot update a component while rendering another means one component called a different component's setState during render. React keeps render pure, so it refuses the update and throws. The fix is to move that update into an event handler, an Effect, or the component that owns the state.

The console shows the exact pair of components involved: "Cannot update a component (Parent) while rendering a different component (Child). To locate the bad setState() call inside Child, follow the stack trace..." Those two names point straight at the caller and the component being updated.

What the error means

During render, a component should only calculate its output. Calling a setter that belongs to another component breaks that rule, because it would mutate a component that is not currently rendering.

The narrow exception is a component adjusting its own state during render, inside a condition. Calling another component's setter is never allowed. The page fails before its first paint, which is why the error usually appears the moment the app loads.

The bug: a parent setter in a child render

The classic case is a child that calls a parent's setter while the child renders.

App.jsx

import { useState } from "react";
 
function Child({ onReady }) {
  onReady();
  return <p>Child</p>;
}
 
export default function Parent() {
  const [ready, setReady] = useState(false);
  return <Child onReady={() => setReady(true)} />;
}

Child calls onReady during its render, which calls the parent's setReady. React throws because Parent is not the component currently rendering. The call is synchronous, so React has no event to attach it to, and the page never finishes painting.

Move the update to an event

The same signal belongs in an event handler, where state updates are expected.

App.jsx

function Child({ onReady }) {
  return <button onClick={onReady}>Mark ready</button>;
}

Now setReady runs only when the user clicks the button, after render has finished. The button gives React a real event to respond to, so the update has a place to live.

Or lift the state

If the parent needs the value, keep it in the parent and pass a handler down, as above. If only the child needs it, move the state into the child entirely so it updates its own state. Lifting state this way also makes the data flow explicit: the parent owns the value while children only report events.

For the full pattern of moving state between a parent and child, see lifting state up in React.

When an Effect is the right tool

If the update really must happen after mount, an Effect is the place, not the render body.

App.jsx

import { useEffect } from "react";
 
function Child({ onReady }) {
  useEffect(() => {
    onReady();
  }, [onReady]);
 
  return <p>Child</p>;
}

The Effect runs after the component renders, so it no longer updates another component mid-render. Reserve Effects for work that is external to rendering, such as this mount signal, not for deriving values.

Verify the fix

Render the component again and confirm the page paints and the parent state updates at the right moment. A render-phase loop like this one shares symptoms with maximum update depth exceeded, so the console stack is the best guide to which one you hit.