Recently, I employed Zustand to my npm package for state management. I found it to be very outstanding and straightforward, with its most impressive advantage being significantly reduced boilerplate compared to Redux. Overall, I’m genuinely satisfied with it and would highly recommend it for future projects. However, it’s important to note that it’s only suited for smaller projects or rapid prototyping. Here’s my personal review of Zustand based on my experience, I’ll compare it with a more traditional state management framework, Redux, as I personally have a strong preference for Redux.
Here’s a comparison table I came across in a post:
| Feature | Redux | Zustand |
|---|---|---|
| Approach | Centralized state store with actions and reducers | Decentralized state management with hooks |
| Complexity | More complex, with boilerplate code for actions, reducers, and store setup | Simpler, with minimal setup and direct state access through hooks |
| Scalability | Highly scalable for large applications with complex state | Moderately scalable for small to medium-sized applications |
| Performance | Can be slightly slower due to centralized store updates | Potentially faster due to direct state manipulation and local updates |
| Learning curve | Steeper learning curve due to more complex concepts and boilerplate | Gentler learning curve due to simpler API and integration with hooks |
| Data flow | Unidirectional data flow with actions triggering state changes | Bidirectional data flow with direct state manipulation within components |
| Debugging | Robust debugging tools and time-travel capabilities | Less robust debugging, but easier to understand due to direct state access |
| Ecosystem | Large and mature ecosystem with extensive tooling and middleware | Smaller and less mature ecosystem, but growing rapidly |
| Best for | Large-scale applications with complex data flows and predictable state management | Small to medium-sized applications where simplicity and flexibility are key or rapid prototype development |
| Community support | Abundant resources available on the internet, making it easy to find solutions | Finding solutions is challenging most of the time |
| Unit Testing | Easier and more efficient compared to other state management solutions | Difficulties with mocking and isolating store behavior |
And here are my personal opinions, focusing on a few key aspects based on my experience with Zustand.
Limited Community Support
Zustand released its initial version in April 2019 and currently has a relatively small user base. Consequently, there are limited online resources available to help developers in working with Zustand. When I tried to search for terms like “zustand testing” or “zustand unit testing,” I found zero web pages providing real examples of Zustand implementation with testing. This lack of documentation can be particularly frustrating, especially when faced with TypeScript errors or complaints for which solutions are nowhere to be found online. At times, it’s so frustrating that I almost punched through my monitor screen.
A lot of developers have had to replace their keyboards and monitors due to frustrations with Zustand.
Relatively Weak DevTools
I’m not saying that Zustand’s DevTools are absolutely weak, but based on my own experience, I’ve found that Redux DevTools offer a more comprehensive and feature-rich debugging experience in comparison.
Not Ideal for Component Testing
Zustand isn’t ideal for component testing. While coding for React components using Zustand for state management results in straightforward and clean code, it becomes so very difficult when it becomes to writing tests. Zustand heavily relies on hooks to connect to React components, and since hooks aren’t designed for dependency injections. As a result, I often have to mock many functions and variables to ensure that the tests run properly, often resulting in messy test code and achieving just a little in terms of testing effectiveness.
Poor Support for Types
Zustand and its related packages often give TypeScript errors in my code. Finding solutions or supported @type packages to resolve these errors often seems impossible.
Conclusion
For corporate projects, I strongly suggest using Redux for state management. For personal projects, I’ll just stick with JQuery.