Warning: Cannot update a component (X) while rendering a different component (Y)

What causes this error

React expects state updates to happen outside of the render phase — in event handlers or effects — so it can batch and schedule them safely. If a child component calls a setter passed down from a parent (e.g. via a callback prop) directly while rendering, React warns because it can't guarantee consistent behavior for that update.

The Fix

// Wrong — calling onReady (which sets parent state) directly during render
function Child({ onReady }) {
  onReady(true); // fires every render, during render — warning
  return <div>Child</div>;
}

// Fix — move the call into an effect so it runs after render
function Child({ onReady }) {
  useEffect(() => {
    onReady(true);
  }, [onReady]);
  return <div>Child</div>;
}

Common causes / variations

• A child invoking a parent's setter-wrapping callback directly in its render body instead of an effect
• Derived state being "synced" between parent and child via a callback fired during render rather than computed inline
• A render-prop or children-as-function pattern that calls a state setter as a side effect of rendering

Related errors

See also: Too many re-renders, Maximum update depth exceeded.