React Error: Cannot Update Component While Rendering a Different Component — What It Means & How to Fix It

What Does This Error Mean?

This error means a component tried to update the state of a different component during the render phase. During rendering, React is building the UI snapshot — state changes at this point cause unpredictable results. State updates should only happen in event handlers, useEffect callbacks, or other asynchronous contexts — never directly during render.

Affected Models

React 16 and later
React 18+ makes this a hard error instead of a warning

Common Causes

A child component calls a setState function (or dispatch) received as a prop directly inside its render, not in response to an event
A function component calls a callback prop that updates parent state during the render phase
Accidentally calling a state setter (like setCount) as part of a JSX expression that runs during render
Using a side effect pattern inside the component body instead of inside useEffect
A custom hook that immediately calls an update function without deferring it to an effect

How to Fix It

Move the state update into a useEffect hook. Instead of calling setState directly in the component body, wrap it in useEffect so it runs after the render is complete.

Example: useEffect(() => { if (someCondition) setState(newValue); }, [someCondition]);
Check if you are accidentally calling a function instead of passing it. In JSX, {onChange(value)} calls the function during render. It should be {() => onChange(value)} or a proper event handler.

Look for any function calls in your JSX that are not inside an event handler syntax.
If a child component needs to notify its parent of something, trigger that notification inside an event handler (like onClick, onChange, onSubmit) — not during the render.

Render should be a pure calculation of what to display. Side effects belong in event handlers or useEffect.
If you need to synchronize parent state with a child's computed value, lift the state to the parent and pass it down as props instead of having the child update the parent during render.

Derived state that depends on props should be calculated during render, not pushed back up to the parent.
Use the useEffect cleanup pattern for derived state: if you need to update state based on props, compare the new prop value to the current state inside a useEffect.

Example: useEffect(() => { if (prop !== state) setState(prop); }, [prop]);

When to Call a Professional

This error is always fixable yourself. The fix is to move the state update into a useEffect or event handler, so it happens after rendering is complete.

Frequently Asked Questions

Why can't React just allow state updates during rendering?

During rendering, React is calculating the virtual DOM — it needs this calculation to be pure and predictable. If a state update happens in the middle of this calculation, React would need to restart the render with the new state. This could create infinite loops and makes it impossible for React to guarantee consistent output.

What changed between React 17 and React 18 for this error?

In React 17, this was a warning that did not always stop your app. In React 18, it became a hard error that breaks rendering. If you upgraded to React 18 and suddenly see this error, the bug existed before — it just was not enforced strictly.

Is it ever OK to update state directly in a component body without useEffect?

Yes — React allows one exception: you can call setState at the top level of a component to set an initial value based on props, as long as it is the first render. This is called 'rendering with state initialization'. But this is a very specific pattern and not common. For most cases, use useEffect for state updates that depend on other values.