This warning means a state update is firing inside the render phase of one component, which triggers a re-render of another component before React finishes the current render pass.
What "Cannot update a component while rendering a different component" Means
React's render phase must be a pure function of props and state. When you call a state setter (like setState or a dispatch) during render, you're scheduling work that React can't safely process until the current render completes. The warning appears in the browser console in React 16.14+ and React 18, and it's a hard error in concurrent mode.
Why It Happens
The two most common real causes are: calling a state setter directly in the component body (not inside an event handler or effect), and passing a function that updates parent state as a prop to a child that calls it during its own render. Both violate React's rule that rendering must be side-effect free.
Example Code That Triggers It
Here's a minimal runnable example that produces this exact warning in a browser with React 18:
import { useState } from 'react';
function Parent() {
const [count, setCount] = useState(0);
// ❌ Directly calling setState during render
if (count === 0) {
setCount(1);
}
return <Child count={count} />;
}
function Child({ count }: { count: number }) {
return <div>{count}</div>;
}
Run this in a React app and open the console — you'll see the warning fire immediately on mount. The setCount(1) call happens synchronously inside Parent's render body, which schedules an update to Parent while React is still rendering it.
How to Fix It
Move the state update into a useEffect or an event handler:
import { useState, useEffect } from 'react';
function Parent() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(1);
}, []);
return <Child count={count} />;
}
function Child({ count }: { count: number }) {
return <div>{count}</div>;
}
The fix works because useEffect runs after the render commits to the DOM. React finishes the initial render, then schedules the state update as a separate pass — no render-phase side effects, no warning.
Common Mistakes That Cause This
Calling setters in derived state logic. Some devs try to "sync" props to state by calling setState inside the render body when a prop changes. That's a classic anti-pattern — use the key prop or the useState initializer with a compare function instead.
Passing updater functions as render props. If you pass setParentState down to a child and the child calls it in its own render body (e.g., to conditionally change parent data), you get this warning. The child's render triggers a parent update mid-render cycle.
When Should You Worry About This?
You should treat this as a bug, not a warning, if you're using React 18 with concurrent rendering. In concurrent mode, this can cause inconsistent UI states because React may interrupt and restart renders. In React 16-17, it's still a logic error — your component is doing work it shouldn't during render, and it can cause infinite loops if the setter triggers a re-render that calls the setter again.
First Check Next Time
Check every direct function call inside your component body — if any of them call a state setter from a parent or sibling, move it into an event handler, useEffect, or a memoized callback. That single audit eliminates 90% of these warnings.