Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
The warning “Cannot update a component while rendering a different component” means that while React was rendering one component, code caused a state update in another component. To fix it, find the update that runs during render and move it to where it belongs: an event handler when a user caused it, a calculation during render when the value is derived, or an Effect only when the update is a genuine side effect with no suitable event. Do not hide the warning until you know which update triggers it.
What the warning is telling you
React added this warning in version 16.13.0. The release note, titled “Warnings for some updates during render,” states the rule directly: “A React component should not cause side effects in other components during rendering.” It also confirms that calling setState during render is allowed, but only when the update targets the same component that is rendering. The warning fires when the target is a different component.
The update can reach the other component in three common ways:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11- A direct state setter, such as
setSomething, called in the body of a component or in a helper that the component calls while rendering. - A callback or dispatch that synchronously updates another component’s state.
- Code inside a library that the component invokes during render, such as a form utility method.
Find the update that runs during render
The message names two components. The one described as rendering is where you start, and the other is the component being updated. Work through the following steps.
#1 Best Overall
- Note both component names from the warning message.
- Open the component stack shown in the browser console and follow it from the rendering component down to the code that triggered the update.
- Search that code path for setters,
dispatchcalls, navigation calls, form-library methods such asresetorsetValue, and prop callbacks that update state in another component. - Confirm the call runs during render. If it sits in the component body, or in a function the body calls directly, it is a render-time update. If it sits inside an event handler or an Effect, it is not the problem, and the cause lies elsewhere.
Why render must not change other components
React’s “Keeping Components Pure” guidance describes rendering as a calculation. A component should return its UI from its inputs without changing state or variables that existed before the render. Event handlers are the usual place for side effects, and Effects are a last resort for cases where no appropriate event handler exists. Updating another component’s state during render breaks this model, because React may render components in a different order or more than once, and the update happens at an uncontrolled point in that process.
Choose the fix by where the update comes from
The correct fix depends on what caused the update. The table below maps the common sources to the place each one belongs.
| Source of the update | Where it belongs | Typical example |
|---|---|---|
| A user action such as typing, clicking, or submitting | The event handler, such as onChange, onClick, or a submit callback |
Formatting an input value in onChange instead of while rendering the field |
| A value derived from current props or state | Calculated during render, with no copy stored in another component’s state | Filtering a list in the component that renders it, rather than pushing the filtered result into a parent’s state during render |
| A genuine side effect that happens after rendering and has no suitable event | useEffect |
Synchronising the component with an external system after it appears on screen |
| A library call made while rendering | The handler or event that should trigger it, not the render body | Calling a form library’s reset or setValue from the render path |
Moving an update out of render is usually the whole fix. Avoid adding an Effect just to relocate a derived calculation, because React treats Effects as a last resort and an Effect that only copies values between components adds another render pass without fixing the design.
A library-triggered example
A library can cause the warning even when your own components look clean. In React Hook Form issue #9632, a maintainer identified reset and setValue calls made during render as the source. The reporter said that moving input formatting into onChange resolved their case. That outcome applies to that reported case only. It does not mean the library is generally defective, and it does not show that the same change will fix every form library or every version. Check which call in your own code runs during render before changing library usage.
Same-component updates and render loops
Calling setState during render for the same component is a supported pattern, which means that cross-component updates are a separate problem and should not be confused with it. A same-component update still needs a guard, because an unconditional update during render re-triggers rendering and can repeat indefinitely. React’s useState reference lists “Too many re-renders” among its troubleshooting topics. Consult that section when you are investigating a loop. A loop error alone does not explain the cross-component warning, so check the component names first.
Versions and where to check current behaviour
The warning was introduced in React 16.13.0, which was released on February 26, 2020. The release note describes the warning as a way to find bugs caused by unintentional state changes. The render-purity guidance in “Keeping Components Pure” is the current official reference for the rule itself, and the useState reference covers the troubleshooting topics mentioned above. If you are on a later React version, confirm the exact warning wording and the behaviour against the current documentation for your version.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
