zustand-mutative

A powerful Mutative middleware for Zustand that significantly boosts the efficiency of immutable state updates. Transform your state management with this innovative solution!

The zustand-mutative middleware allows developers to handle immutable data in a mutable way, simplifying state updates within Zustand. Experience the convenience of immutable state without sacrificing performance.

Performance Benefits

Harnessing the power of Mutative, this middleware is 2-6 times faster than traditional Zustand implementations using spread operations and over 10 times faster than zustand/middleware/immer. For an in-depth performance comparison, explore the Mutative performance documentation.

Quick Usage Example

To get started with zustand-mutative, simply import the middleware and define your store:

import { create } from 'zustand';
import { mutative } from 'zustand-mutative';

type State = {
  count: number;
};

type Actions = {
  increment: (qty: number) => void;
  decrement: (qty: number) => void;
};

export const useCountStore = create<State & Actions>()(
  mutative((set) => ({
    count: 0,
    increment: (qty: number) =>
      set((state) => {
        state.count += qty;
      }),
    decrement: (qty: number) =>
      set((state) => {
        state.count -= qty;
      }),
  }))
);

Advanced Features

zustand-mutative also supports advanced options that enhance your state management:

• Strict Mode
• Auto Freeze
• Marking Data Structures

Inspiration

The zustand-mutative middleware draws inspiration from the functionalities of zustand/middleware/immer, enriching the developer experience while maintaining high performance.