Comparing React state tools: Mutative vs. Immer vs. reducers

When working with states in React, we have several choices for managing and modifying them in our projects. This article will discuss three state management solutions for managing immutable states: Reducer, Immer, and Mutative.

We will provide an overview of each tool with examples of how to use them. Then, we’ll compare their performance and see which is better for state management.

Let’s get started.

Overview of React reducers

Most React developers are already familiar with reducer functions. However, let’s review them briefly in simple terms.

Reducers help us modify states within specific action types more elegantly and clean up our code if we need to manage complex states within these types.

For example, let’s consider a simple to-do application. Without reducers, we would use useState for its state management. It would have some functions such as addTodoItem, removeTodoItem, and markComplete.

Let’s see this in the code:

import { useState } from 'react';
import cn from 'classnames';

interface TodoItemProps {
  title: string;
  isComplete: boolean;
}

function TodoExample() {
  const [todos, setTodos] = useState<TodoItemProps[]>([]);
  const [inputText, setInputText] = useState<string>('');

  const addTodoItem = (title: string) => {
    setTodos((todo) => [...todo, { title, isComplete: false }]);
  };

  const removeTodoItem = (id: number) => {
    setTodos((todo) => todo.filter((_, ind) => ind !== id));
  };

  const markComplete = (id: number) => {
    setTodos((todo) => {
      const newTodo = [...todo];
      newTodo[id].isComplete = true;
      return newTodo;
    });
  };

  return (
    <div className="max-w-[400px] w-full mx-auto my-10">
      <div className="flex items-center gap-4 mb-4">
        <input
          placeholder="Enter a new todo item"
          className="border rounded-md w-full p-1"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
        <button
          className="bg-gray-200 w-[200px] py-1 rounded-md"
          onClick={() => {
            addTodoItem(inputText);
            setInputText('');
          }}
        >
          Add Todo
        </button>
      </div>
      <div className="space-y-4">
        {todos.map((item, ind) => (
          <div key={ind} className="flex items-center gap-4">
            <h3
              className={cn(
                item.isComplete
                  ? 'line-through text-gray-600'
                  : 'text-gray-900',
                'text-sm flex-1'
              )}
            >
              {item.title}
            </h3>
            <button
              className="bg-gray-200 px-2 py-1 rounded-md"
              onClick={() => markComplete(ind)}
            >
              Mark Complete
            </button>
            <button
              className="bg-gray-200 px-2 py-1 rounded-md"
              onClick={() => removeTodoItem(ind)}
            >
              Remove
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TodoExample;

We can move the todo logic in a custom Hook to make the code a bit cleaner. Let’s create a new useTodoHook and move our logic here:

import { useState } from 'react';

export interface TodoItemProps {
  title: string;
  isComplete: boolean;
}

export const useTodo = () => {
  const [todos, setTodos] = useState<TodoItemProps[]>([]);

  const addTodoItem = (title: string) => {
    setTodos((todo) => [...todo, { title, isComplete: false }]);
  };

  const removeTodoItem = (id: number) => {
    setTodos((todo) => todo.filter((_, ind) => ind !== id));
  };

  const markComplete = (id: number) => {
    setTodos((todo) => {
      const newTodo = [...todo];
      newTodo[id].isComplete = true;
      return newTodo;
    });
  };

  return { todos, addTodoItem, removeTodoItem, markComplete };
};

Then, we can modify our component, as shown below. This would help make the code a lot cleaner:

import { useState } from 'react';
import cn from 'classnames';
import { useTodo } from './hooks/useTodo';

function TodoExample() {
  const { addTodoItem, markComplete, removeTodoItem, todos } = useTodo();
  const [inputText, setInputText] = useState<string>('');

  return (
    <div className="max-w-[400px] w-full mx-auto my-10">
      <div className="flex items-center gap-4 mb-4">
        <input
          placeholder="Enter a new todo item"
          className="border rounded-md w-full p-1"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
        <button
          className="bg-gray-200 w-[200px] py-1 rounded-md"
          onClick={() => {
            addTodoItem(inputText);
            setInputText('');
          }}
        >
          Add Todo
        </button>
      </div>
      <div className="space-y-4">
        {todos.map((item, ind) => (
          <div key={ind} className="flex items-center gap-4">
            <h3
              className={cn(
                item.isComplete
                  ? 'line-through text-gray-600'
                  : 'text-gray-900',
                'text-sm flex-1'
              )}
            >
              {item.title}
            </h3>
            <button
              className="bg-gray-200 px-2 py-1 rounded-md"
              onClick={() => markComplete(ind)}
            >
              Mark Complete
            </button>
            <button
              className="bg-gray-200 px-2 py-1 rounded-md"
              onClick={() => removeTodoItem(ind)}
            >
              Remove
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TodoExample;

This example is okay for our application. The useState Hook is handy for managing simple or individual states.

However, if our objects become more complex, then managing these objects or arrays becomes much more challenging and messy with the useState Hook. In this case, we can use the useReducer Hook.

Let’s modify our useTodo Hook to work with the useReducer Hook:

import { useReducer } from 'react';

export interface TodoItemProps {
  title: string;
  isComplete: boolean;
}

enum TodoActionType {
  ADD_ITEM = 'add-item',
  REMOVE_ITEM = 'remove-item',
  MARK_ITEM_COMPLETE = 'mark-complete',
}

const reducerFn = (
  state: { todos: TodoItemProps[] },
  action: { type: TodoActionType; payload: string | number }
): { todos: TodoItemProps[] } => {
  const { payload, type } = action;
  switch (type) {
    case TodoActionType.ADD_ITEM: {
      return {
        ...state,
        todos: [
          ...state.todos,
          { title: payload.toString(), isComplete: false },
        ],
      };
    }
    case TodoActionType.REMOVE_ITEM: {
      return {
        ...state,
        todos: [...state.todos.filter((_, ind) => ind !== payload)],
      };
    }
    case TodoActionType.MARK_ITEM_COMPLETE: {
      return {
        ...state,
        todos: state.todos.map((todo, ind) =>
          ind === payload ? { ...todo, completed: true } : todo
        ),
      };
    }
    default: {
      return state;
    }
  }
};

export const useTodo = () => {
  const [state, dispatch] = useReducer(reducerFn, {
    todos: [],
  });

  const addTodoItem = (title: string) => {
    dispatch({ type: TodoActionType.ADD_ITEM, payload: title });
  };

  const removeTodoItem = (id: number) => {
    dispatch({ type: TodoActionType.REMOVE_ITEM, payload: id });
  };

  const markComplete = (id: number) => {
    dispatch({ type: TodoActionType.MARK_ITEM_COMPLETE, payload: id });
  };

  return { todos: state.todos, addTodoItem, removeTodoItem, markComplete };
};

Although not ideal in our example, useReducer can be helpful for extensive updates across multiple states. Here, we can easily update our states using some predefined action type using the dispatch method, and the core business logic is handled inside the reducer function.

Overview of Immer

Immer is a lightweight package that simplifies working with immutable states. Immutable data structures ensure efficient data change detection, making it easier to track modifications. Additionally, they enable cost-effective cloning by sharing unchanged parts of a data tree in memory.

Let’s look into our to-do example and see how we can use Immer in our example:

import { useImmer } from 'use-immer';

export interface TodoItemProps {
  title: string;
  isComplete: boolean;
}

export const useTodo = () => {
  const [todos, updateTodos] = useImmer<TodoItemProps[]>([]);

  const addTodoItem = (title: string) => {
    updateTodos((draft) => {
      draft.push({ title, isComplete: false });
    });
  };

  const removeTodoItem = (id: number) => {
    updateTodos((draft) => {
      draft.splice(id, 1);
    });
  };

  const markComplete = (id: number) => {
    updateTodos((draft) => {
      draft[id].isComplete = true;
    });
  };

  return { todos, addTodoItem, removeTodoItem, markComplete };
};

In this case, we can modify our immutable to-do items with Immer. Immer first gets the base state, makes a draft state, allows the modification of the draft state, and then returns the modified state, allowing the original state to be immutable.

In this example, we used the use-immer Hook, which can be added by running npm run immer use-immer.

Overview of Mutative

The implementation of Mutative is almost similar to Immer, but more robust. Mutative processes data with better performance than both Immer and native reducers.

According to the Mutative team, this state management tool helps make immutable updates more efficient. It’s reportedly between two to six times faster than a naive handcrafted reducer and more than 10 times faster than Immer. This is because it:

• Has additional features like custom shallow copy (support for more types of immutable data)
• Allows no freezing of immutable data by default
• Allows non-invasive marking for immutable and mutable data
• Supports safer mutable data access in strict mode
• Also supports reducer functions and any other immutable state library

Let’s look into our example with Mutative below:

import { useMutative } from 'use-mutative';

export interface TodoItemProps {
  title: string;
  isComplete: boolean;
}

export const useTodo = () => {
  const [todos, setTodos] = useMutative<TodoItemProps[]>([]);

  const addTodoItem = (title: string) => {
    setTodos((draft) => {
      draft.push({ title, isComplete: false });
    });
  };

  const removeTodoItem = (id: number) => {
    setTodos((draft) => {
      draft.splice(id, 1);
    });
  };

  const markComplete = (id: number) => {
    setTodos((draft) => {
      draft[id].isComplete = true;
    });
  };

  return { todos, addTodoItem, removeTodoItem, markComplete };
};

We used the use-mutative Hook in this example, which can be added by running the npm run mutative use-mutative command.

Comparing Mutative vs. Immer vs. reducers

Based on the discussions above, here is a comparison table among the Mutative, Immer, and Reducers:

Although the primary functionality is the same for all of these state management solutions, there are significant differences in their performance measurements.

Mutative has a benchmark testing implementation to compare Reducer, Immer, and Mutative performance. To run the benchmark, first, clone the mutative repository from GitHub by running the following command:

git clone [email protected]:unadlib/mutative.git

Then install the dependencies and run the benchmark using the following command:

yarn install && yarn benchmark

You will get the following diagrams by running the benchmark. You can get these diagrams in the base directory of the mutative repo. First, you’ll see a performance report showing Mutative outperforming Immer:

Then, you should see a Mutative vs. reducers performance comparison for an array, showing that the more items are in the array, the more time reducers require, while Mutative’s time requirement only increases slightly:

The next diagram compares the performance of Mutative and reducers for an object. Here, you can see that the more items an object has, the more time is required by both the reducers and Mutative. However, the amount of time needed is far lower for Mutative than reducers as the number of items in the object increases:

Finally, you’ll see a diagram comparing Mutative and Immer’s performance for a class. Similar to the previous comparisons, we can see that as the number of keys increases for a class, the execution time increases more drastically for Immer compared to Mutative, which shows that Mutative is a great choice for performance optimization:

From the metrics above, we can observe that Mutative is more powerful in performance, especially when handling large data volumes. On the other hand, reducers and Immer cannot handle large amounts of data, unlike mutations, especially arrays and classes.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Overall, in our benchmark test, Mutative places first, reducers place second, and Immer gets the last position.

Conclusion

Most developers use reducers, as they come built with React. But Mutative is a better option for handling large amounts of data in a React application.

You can check out the example shown above is in this SlackBlitz repo. If you have any further questions, you can comment below — and if you explore Mutative, feel free to share your thoughts as well.