How to fix Warning: A component called useState() or useReducer() whose update was not processed in React

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 125 views

React logs this warning when an update queued by useState or useReducer is discarded because it was scheduled at the wrong time (render phase, impure reducer, or after unmount), so the component never reapplies the new value.

Quick fix

Fixes Warning: A component called useState() or useReducer() whose update was not processed

  1. Capture the context from the warning stack trace
  2. Keep reducers and render bodies pure
  3. Shift updates into event handlers or useEffect
  4. Guard asynchronous callbacks
  5. Use updater functions for multiple queued changes
react — error
# Warning: A component called useState() or useReducer() whose update was not proc
Warning: A component called useState() or useReducer() whose update was not processed

What this error means

React batches hook updates and only processes them after the current event handler or effect finishes. If a component dispatches an update while another component is still rendering, inside a reducer that has side effects, or after it already unmounted, the reconciliation machinery can decide the update cannot be applied and drops it instead of allowing an inconsistent state change. The warning is React’s way of telling you that the update never made it through the queue. Common scenarios include calling a setter from inside a render body (or from within useReducer when it mutates the outer scope), or letting an asynchronous callback run after the component is gone. Keeping render and reducer functions pure (no extra dispatches, no shared mutable state) and moving side effects into event handlers/useEffect keeps state updates in the safe part of React’s lifecycle.

Typical symptoms

  • The console repeatedly shows “Warning: A component called useState() or useReducer() whose update was not processed”.
  • The UI never shows the state change that happens inside the event or reducer that triggered the warning.
  • React DevTools highlights a component whose hook updater is dispatching at render time or during another component’s rendering.
  • You see the warning after navigating away, when a timer resolves, or when strict mode double-invokes a reducer.
  • The warning often coincides with a state updater that runs while the current render tree is already mid-flight.

Common causes

  1. Calling a setter or dispatch from inside a render body or useReducer reducer, which introduces side effects before React completes reconciliation.
  2. Reducer logic that mutates shared state or calls props-based callbacks (e.g., calling setParentState from inside the reducer).
  3. Scheduling updates from async callbacks (setTimeout, Promise) without cancelling them when the component unmounts, so React drops them.
  4. Creating multiple updates inside an event handler without using updater functions—React queues them, and the last one may override earlier queued state but the warning surfaces when React can’t apply the queue.
  5. StrictMode in development re-runs render/pure hooks to detect impurities, which will trigger this warning if your code mutates things while rendering.

How to fix "Warning: A component called useState() or useReducer() whose update was not processed"

1Capture the context from the warning stack trace

Look at the warning that React prints—it will mention the component that dispatched the update and the stack trace. Use the console and React DevTools to find the exact hook call (useState or useReducer) where the setter or dispatch is invoked, and note whether it runs inside the render body, a reducer, or an effect.

2Keep reducers and render bodies pure

Do not call state setters or props callbacks inside reducers or during render. Reducers should only calculate the new state and return it. If you need to inform a parent or run a side effect, do it from useEffect or an event handler instead. GitHub issue #23073 demonstrates how an impure reducer (calling setParentState) triggered a warning because React enforces purity.

3Shift updates into event handlers or useEffect

React batches updates and waits until all the code in an event handler finishes before processing them, so state setters belong inside event handlers, not inline during rendering. If you are preparing a complex state change, build the new value with updater functions (e.g., setValue(prev => prev + 1)) and let React process the queue after the handler completes, as documented in the “Queueing a Series of State Updates” guide.

4Guard asynchronous callbacks

Async callbacks (setTimeout, fetch.then, Promise/microtask) that call setters after the component unmounted will queue updates that React cannot process. Keep a ref flag or abort controller, and cancel the callback in a useEffect cleanup to ensure setters only run while the component is mounted.

5Use updater functions for multiple queued changes

If you need to queue several state changes from the same handler, pass updater functions such as setState(prev => ...) instead of raw values. React will process them sequentially when it flushes the queue, avoiding interference between renders. This also helps React detect that the state update can still be applied safely.

6Rerun the scenario in strict mode

React’s StrictMode intentionally double-invokes render-phase code to expose impurities. Run your app in development with <React.StrictMode> enabled and replay the interaction. If the warning disappears after you remove extra dispatches/side effects, you have fixed the root cause.

7Verify the fix

Reload the app, perform the action again, and confirm the warning no longer appears. Use React DevTools Profiler to ensure renders are stable and state updates behave as expected. Reintroduce any necessary side effects in useEffect/useLayoutEffect after the render commits so React can process the queue on schedule.

Advanced notes

React expects components to behave like pure functions that “mind their own business”. Calling state setters during render or inside reducers adds side effects that React intentionally drops to keep reconciliation deterministic—see the “Keeping Components Pure” guide. In concurrent mode, React may abort and restart renders, so only event handlers or effects should schedule updates. Always clean up timers/listeners to stop dispatched updates after unmount.

Frequently asked questions

What does "Warning: A component called useState() or useReducer() whose update wa" mean?
React batches hook updates and only processes them after the current event handler or effect finishes. If a component dispatches an update while another component is still rendering, inside a reducer that has side effects, or after it already unmounted, the reconciliation machinery can decide the update cannot be applied and drops it instead of allowing an inconsistent state change. The warning is React’s way of telling you that the update never made it through the queue.
How do I fix "Warning: A component called useState() or useReducer() whose update wa"?
React logs this warning when an update queued by useState or useReducer is discarded because it was scheduled at the wrong time (render phase, impure reducer, or after unmount), so the component never reapplies the new value.
What causes "Warning: A component called useState() or useReducer() whose update wa"?
Calling a setter or dispatch from inside a render body or useReducer reducer, which introduces side effects before React completes reconciliation. Reducer logic that mutates shared state or calls props-based callbacks (e.g., calling setParentState from inside the reducer). Scheduling updates from async callbacks (setTimeout, Promise) without cancelling them when the component unmounts, so React drops them.
Is the "Warning: A component called useState() or useReducer() whose update wa" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading