How to fix Cannot perform a state update inside a useReducer without dispatching an action in React

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 89 views

This error occurs when you attempt to modify React state directly within a useReducer hook without dispatching an action. It breaks the fundamental Redux pattern where state updates must be triggered by dispatched actions. This guide explains how to identify and fix this common mistake.

Quick fix

Fixes Cannot perform a state update inside a useReducer without dispatching an action

// ❌ Wrong
directUpdate = () => {
  state.count = state.count + 1;
};

// ✅ Correct
const increment = () => {
  dispatch({ type: 'INCREMENT' });
};

Identify where state is being mutated directly
Replace direct mutations with dispatch calls
Ensure reducer handles the action correctly
Test the fix

react — error

$// ❌ Wrong
directUpdate = () => {
  state.count = state.count + 1;
};
// ✅ Correct
const increment = () => {
  dispatch({ type: 'INCREMENT' });
};
Cannot perform a state update inside a useReducer without dispatching an action

What this error means

The error message indicates that you're trying to update the state managed by useReducer synchronously, bypassing the dispatch function. In Redux and React's useReducer, state updates must be pure and predictable, achieved only by dispatching action objects. Direct mutations lead to inconsistent UI and debugging difficulties because React cannot track changes and schedule proper re-renders.

Typical symptoms

Console shows the error "Cannot perform a state update inside a useReducer without dispatching an action"
UI fails to reflect intended state changes
State appears stuck or reverts unexpectedly
Components re-render but with outdated data
Unexpected behavior when interacting with stateful components

Common causes

Calling state mutating functions (like push, splice) directly on the state variable
Attempting to assign a new value to state property without using dispatch
Confusing useReducer with useState and trying to set state directly
Dispatching an action that doesn't trigger a reducer update due to incorrect action type
Using side effects inside the reducer that modify state outside the dispatch flow

How to fix "Cannot perform a state update inside a useReducer without dispatching an action"

1Identify where state is being mutated directly

Examine your component code and look for any lines where you're modifying the state variable directly. Common patterns include:
- state.push(newItem)
- state.property = newValue
- state = newState (reassignment)

Check both the component body and any helper functions that receive state as an argument. Use your browser's developer tools to set breakpoints or add console logs to trace the origin of the mutation.

2Replace direct mutations with dispatch calls

Instead of modifying state directly, create an action object and call dispatch. For example:

javascript

// ❌ Wrong
directUpdate = () => {
  state.count = state.count + 1;
};

// ✅ Correct
const increment = () => {
  dispatch({ type: 'INCREMENT' });
};

Ensure your reducer handles the action type appropriately, returning a new state object rather than mutating the existing one.

3Ensure reducer handles the action correctly

Verify that your reducer function includes a case for the dispatched action type and returns a new state object immutably. Example:

javascript

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

Avoid side effects inside the reducer. If you need asynchronous operations, use middleware like Redux Thunk or move logic to action creators.

4Test the fix

After making changes, run your application and verify that the error no longer appears. Test the state updates by interacting with your UI and confirming that the state changes as expected. Use React DevTools and Redux DevTools to inspect state changes and action history. Write unit tests for your reducer to ensure it handles actions correctly and immutably.

Advanced notes

This error often arises when migrating from useState to useReducer or when integrating Redux patterns. Remember that useReducer expects immutable updates; always return a new state object. For complex state shapes, consider using Immer or Redux Toolkit to simplify immutable logic. Additionally, be mindful of stale closures when dispatching actions inside useEffect dependencies; include dispatch in the dependency array if needed.

Frequently asked questions

What does "Cannot perform a state update inside a useReducer without dispatching" mean?: The error message indicates that you're trying to update the state managed by useReducer synchronously, bypassing the dispatch function. In Redux and React's useReducer, state updates must be pure and predictable, achieved only by dispatching action objects. Direct mutations lead to inconsistent UI and debugging difficulties because React cannot track changes and schedule proper re-renders.
How do I fix "Cannot perform a state update inside a useReducer without dispatching"?: This error occurs when you attempt to modify React state directly within a useReducer hook without dispatching an action. It breaks the fundamental Redux pattern where state updates must be triggered by dispatched actions. This guide explains how to identify and fix this common mistake.
What causes "Cannot perform a state update inside a useReducer without dispatching"?: Calling state mutating functions (like push, splice) directly on the state variable Attempting to assign a new value to state property without using dispatch Confusing useReducer with useState and trying to set state directly
Is the "Cannot perform a state update inside a useReducer without dispatching" error serious?: It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading

📚React Official Documentation