A Mutative middleware for Zustand enhances the efficiency of immutable state updates.
With the Mutative middleware, you can simplify the handling of immutable data in Zustand in a mutable way, allowing you to use immutable state more conveniently.
zustand-mutative is 2-6x faster than zustand with spread operation, more than 10x faster than zustand/middleware/immer. Read more about the performance comparison in Mutative.
In order to use the Mutative middleware in Zustand, you will need to install Mutative and Zustand as a direct dependency.
npm install zustand-mutative zustand mutative
# Or use any package manager of your choice.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;
}),
}))
);zustand-mutative is inspired by zustand/middleware/immer.
zustand-mutative is MIT licensed.