How to fix The return value of the reducer must be a new object, not the draft in React

What this error means

The "return value must be a new object, not the draft" error is thrown by Immer when used with Redux Toolkit. Immer allows you to write reducers that appear to mutate state directly, but internally it tracks changes to produce an immutable update. This error occurs when you violate Immer's core rule: you must either mutate the draft state OR return a new state value, but not both. Redux Toolkit uses Immer internally with createReducer and createSlice, so this error typically appears when writing reducer logic incorrectly.

Typical symptoms

• Redux Toolkit throws error: "The return value of the reducer must be a new object, not the draft"
• Application crashes when dispatching certain actions
• Error appears in console when using arrow functions with implicit returns in reducers
• State updates fail to apply correctly
• Error occurs after updating to newer versions of Immer or Redux Toolkit

Common causes

1. Using arrow functions with implicit returns that both mutate and return
2. Attempting to return the draft state object instead of letting Immer handle it
3. Mixing mutation syntax with return statements in the same reducer
4. Version mismatch between Immer and Redux Toolkit
5. Manually importing and using Immer's produce function inside Redux Toolkit reducers

How to fix "The return value of the reducer must be a new object, not the draft"

// Incorrect - both mutates AND returns
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    state.value = action.payload; // Mutation
    return state; // Explicit return - ERROR!
  });
});

// Correct - only mutate
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    state.value = action.payload; // Just mutate, no return
  });
});

// Also correct - only return (no mutation)
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    return { ...state, value: action.payload }; // Return new object
  });
});

// Choose EITHER mutation style:
case 'UPDATE_VALUE':
  draft.value = action.payload;
  // No return statement - Immer handles it
  break;

// OR return style:
case 'UPDATE_VALUE':
  return {
    ...state,
    value: action.payload
  };

// NOT both:
case 'UPDATE_VALUE':
  draft.value = action.payload; // Mutation
  return draft; // Return - ERROR!

# Check installed versions
npm list immer redux @reduxjs/toolkit

# If there's a version mismatch, let Redux Toolkit manage Immer:
npm uninstall immer
npm install @reduxjs/toolkit

# Redux Toolkit will bring its own compatible Immer version

import { current } from '@reduxjs/toolkit';

const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    console.log('Current draft state:', current(state));
    state.value = action.payload;
    // No return needed
  });
});

// current() creates a plain copy for inspection without affecting the draft

// From mutation to return style:
// Before:
state.items.push(action.payload);

// After:
return {
  ...state,
  items: [...state.items, action.payload]
};

// From return to mutation style:
// Before:
return { ...state, count: state.count + 1 };

// After:
state.count += 1;

Advanced notes

Frequently asked questions

What does "The return value of the reducer must be a new object, not the draft" mean?

The "return value must be a new object, not the draft" error is thrown by Immer when used with Redux Toolkit. Immer allows you to write reducers that appear to mutate state directly, but internally it tracks changes to produce an immutable update. This error occurs when you violate Immer's core rule: you must either mutate the draft state OR return a new state value, but not both.

How do I fix "The return value of the reducer must be a new object, not the draft"?

This error occurs in Redux Toolkit when using Immer incorrectly in reducers. It happens when you try to both mutate the draft state AND return a new value, which violates Immer's rules. The fix involves understanding how Immer works with Redux Toolkit's createReducer or createSlice.

What causes "The return value of the reducer must be a new object, not the draft"?

Using arrow functions with implicit returns that both mutate and return Attempting to return the draft state object instead of letting Immer handle it Mixing mutation syntax with return statements in the same reducer

Is the "The return value of the reducer must be a new object, not the draft" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Cannot mutate state in a non-immer reducer

  How to fix "Cannot mutate state in a non-immer reducer" in React Redux

  MEDIUM

• You must pass in a reducers object as the first argument to createSlice

  How to fix "You must pass in a reducers object as the first argument to createSlice" in React Redux Toolkit

  MEDIUM

• Reducer returned undefined after action, check your action type

  How to fix "Reducer returned undefined after action" in React Redux

  MEDIUM

• Thunk action type is required for createAsyncThunk

  How to fix 'Thunk action type is required for createAsyncThunk' in React

  LOW

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• React version mismatch between packages

  How to fix "React version mismatch between packages" in React

  MEDIUM

Official resources & further reading

• 📚React Official Documentation