https://github.com/mutativejs/zustand-mutative
A Mutative middleware for Zustand enhances the efficiency of immutable state updates.
https://github.com/mutativejs/zustand-mutative
immutability immutable mutative zustand
Last synced: 3 months ago
JSON representation
A Mutative middleware for Zustand enhances the efficiency of immutable state updates.
- Host: GitHub
- URL: https://github.com/mutativejs/zustand-mutative
- Owner: mutativejs
- License: mit
- Created: 2024-05-11T14:43:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-30T16:06:03.000Z (7 months ago)
- Last Synced: 2025-04-04T09:09:29.289Z (3 months ago)
- Topics: immutability, immutable, mutative, zustand
- Language: TypeScript
- Homepage:
- Size: 197 KB
- Stars: 90
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zustand-mutative
[](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).
## Benchmarks
Measure(ops/sec) to update 50K arrays and 1K objects, bigger is better([view source](./scripts/benchmark.ts)). [Mutative v1.1.0 vs Immer v10.1.1]
```
Zustand with Mutative - Update big array and object x 5,169 ops/sec ±2.09% (85 runs sampled)
Zustand with Immer - Update big array and object x 251 ops/sec ±0.40% (92 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()(
mutative((set) => ({
count: 0,
increment: (qty: number) =>
set((state) => {
state.count += qty;
}),
decrement: (qty: number) =>
set((state) => {
state.count -= qty;
}),
}))
);
```
### Mutative Options
- [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)
## Credits
`zustand-mutative` is inspired by `zustand/middleware/immer`.
## License
`zustand-mutative` is [MIT licensed](https://github.com/mutativejs/zustand-mutative/blob/main/LICENSE).