A Mutative middleware for Zustand enhances the efficiency of immutable state updates.
npm install zustand-mutative!Node CI
!license
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.
Measure(ops/sec) to update 50K arrays and 1K objects, bigger is better(view source). [Mutative v1.3.0 vs Immer v10.1.3]
``
Zustand with Mutative - Update big array and object x 5,236 ops/sec ±2.39% (83 runs sampled)
Zustand with Immer - Update big array and object x 255 ops/sec ±0.23% (87 runs sampled)
The fastest method is Zustand with Mutative - Update big array and object
`
In order to use the Mutative middleware in Zustand, you will need to install Mutative and Zustand as a direct dependency.
`bash`
npm install zustand-mutative zustand mutativeOr use any package manager of your choice.
`typescript
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
mutative((set) => ({
count: 0,
increment: (qty: number) =>
set((state) => {
state.count += qty;
}),
decrement: (qty: number) =>
set((state) => {
state.count -= qty;
}),
}))
);
`
- Strict mode
- Auto Freeze
- Marking data structure
zustand-mutative is inspired by zustand/middleware/immer.
zustand-mutative` is MIT licensed.