The message means that while React was rendering one component, code caused a state update in a different component. React flags this because rendering should only calculate what the screen shows. The fix is to find the call that runs during render and move it to the place where the change actually originates: an event handler, or an Effect when there is a genuine side effect.
What the warning is telling you
The warning names two components. The first is the component that was rendering when the update happened. The second is the component that received the update. The first one is where you start looking, because the offending call sits somewhere in its render path or in code that path invokes.
React introduced this check in v16.13.0, released February 26, 2020. The release note, titled “Warnings for some updates during render,” states the principle directly:
“A React component should not cause side effects in other components during rendering.”
Free tools Windows power users keep installed
One-click scans. No signup required.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.#1 Best Overall
The same note separates a case that React supports:
“It is supported to call
setStateduring render, but only for the same component.”
So the warning is not about state updates during render in general. It concerns updates that cross from one component into another while React is still computing output.
Same-component and cross-component updates
Four situations come up when you trace a state change. They differ in whether React supports them and where they belong.
| Situation | Status in React | Where the update belongs |
|---|---|---|
| A component calls its own setter while rendering | Supported by the v16.13.0 release note, but must be guarded against repeating | Render-time adjustment with a condition (see the render loop section) |
| A component calls a setter that belongs to a different component while rendering | Produces the warning | Move it out of render |
| A user changes an input or clicks a control | Normal, expected behavior | The matching event handler, such as onChange, onClick, or a submit callback |
| A genuine side effect must run after the screen updates | Allowed | useEffect, used only when no suitable event handler exists |
How to find the update that triggers the warning
- Read both component names in the warning message. Note which one is the rendering component and which one is the update target.
- Open the stack trace attached to the warning and locate the frame inside the rendering component. The call that triggered the update appears in the stack above or below that frame.
- Search the rendering component, and any helper it calls during render, for setter functions. Look for
setSomethingcalls, dispatch calls, form methods such asresetorsetValue, navigation calls, and prop callbacks that write to a parent or sibling’s state. - Check whether that call runs unconditionally on every render or only when some input changes. Either way, if it executes while the component body is running rather than inside a handler or Effect, it is the call to fix.
Common causes
A callback prop invoked in the component body
The most direct cause is a child that calls a parent-provided callback at the top level of its function body. The parent’s state changes while the child is still rendering. Here is the pattern to avoid:
function Child({ value, onValueChange }) {
onValueChange(value.trim()); // runs during render: updates the parent mid-render
return null;
}A corrected version calls the callback in response to the user’s input, so the update happens inside an event handler:
function Child({ value, onValueChange }) {
return (
<input
value={value}
onChange={(e) => onValueChange(e.target.value.trim())}
/>
);
}Form library calls made during render
Form utilities can hide a setter call inside an ordinary-looking helper. In React Hook Form issue #9632, a user reported this warning. A maintainer identified reset and setValue calls made during render as the cause. The reporter said that moving their input formatting into onChange resolved their case. That is one reported case, not a general rule for every form setup or every version of the library.
Dispatches and store updates triggered while rendering
A dispatch to a reducer, a context setter, or an external store update can run during render if it sits in the component body or in a function that the body calls immediately. The stack trace will usually point to the helper. Move the dispatch into the handler that represents the user action, or into an Effect if it must run after the component commits.
Recommended Free Tools
Library code invoked during render
A third-party library can perform the update on your behalf when your component calls into it during render. The same method applies: trace the stack from the rendering component to the library call, then decide whether that call should move into a handler or Effect. If the library’s own code is the origin, check its issue tracker for similar reports before changing your code around it.
How to fix it
| Where the update comes from | Fix |
|---|---|
| A user typed, clicked, or submitted | Move the update into onChange, onClick, or the submit callback |
| The value is derived from props or other state | Calculate it during render instead of copying it into another component’s state |
| A genuine side effect must follow rendering, such as syncing with an external system | Use useEffect, as described below |
| A form or other library method is called during render | Move the call into the handler that represents the user action, and confirm the library’s recommended pattern in its documentation |
Calculating derived values during render follows React’s guidance that rendering must stay pure: a component should return UI without changing pre-existing state or variables. Event handlers are the usual place for side effects triggered by user action.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When an Effect is the right tool
React’s “Keeping Components Pure” guidance describes Effects as a last resort, to be used when no suitable event handler exists. An Effect is appropriate for synchronizing with something outside React, such as a subscription, a network request, or a DOM API.
An Effect is not a place to shuffle ordinary derived data. Moving a calculation into useEffect only delays it and adds a render cycle. Do not reach for an Effect to silence the warning if the value could simply be computed during render or set in a handler.
Best Value
The v16.13.0 release note also described an Effect as the option for the rare, intentional case of updating another component as a consequence of rendering. In practice, that case is uncommon, and it still requires the update to run after React has committed the render.
Same-component updates and render loops
Calling your own component’s setter during render is supported, but only when you guard it. Without a guard, the component renders, sets state, renders again, and can continue indefinitely. React’s useState reference lists “Too many re-renders” among its troubleshooting topics, and that message is the usual sign of a loop.
A guarded pattern compares the current input with a value stored from a previous render, and updates state only when the two differ:
function Counter({ items }) {
const [count, setCount] = useState(0);
const [prevItems, setPrevItems] = useState(items);
if (items !== prevItems) {
setPrevItems(items);
setCount(0);
}
return count;
}The guard stops the cycle because the second render sees matching values and makes no further updates. Without the comparison, the same code would loop.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do not suppress the warning
Silencing the console message leaves the cross-component update in place. The state change still runs during render, and the behavior the warning flags remains. Fix the call path first; the warning should then stop appearing without any suppression.
Version notes
The behavior described here is the one React introduced in v16.13.0 on February 26, 2020. The current React documentation expresses the same principle in terms of render purity rather than in the release-note wording. If you run a different React version, confirm the exact warning text and any version-specific behavior against that version’s documentation before relying on a specific message.
Quick Recap
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.
