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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite