zustand-mutative
Version:
A Mutative middleware for Zustand enhances the efficiency of immutable state updates.
78 lines (54 loc) • 2.47 kB
Markdown
[](https://www.npmjs.com/package/zustand-mutative)
A [Mutative](https://github.com/unadlib/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](https://mutative.js.org/docs/getting-started/performance).
Measure(ops/sec) to update 50K arrays and 1K objects, bigger is better([view source](./scripts/benchmark.ts)). [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
```
## Installation
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 mutative
# Or use any package manager of your choice.
```
## Usage
```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<State & Actions>()(
mutative((set) => ({
count: 0,
increment: (qty: number) =>
set((state) => {
state.count += qty;
}),
decrement: (qty: number) =>
set((state) => {
state.count -= qty;
}),
}))
);
```
- [Strict mode](https://mutative.js.org/docs/advanced-guides/strict-mode)
- [Auto Freeze](https://mutative.js.org/docs/advanced-guides/auto-freeze)
- [Marking data structure](https://mutative.js.org/docs/advanced-guides/mark)
`zustand-mutative` is inspired by `zustand/middleware/immer`.
`zustand-mutative` is [MIT licensed](https://github.com/mutativejs/zustand-mutative/blob/main/LICENSE).