State management is one of the most important concepts in React world. As React components render and update, they rely on state to manage and reflect changes in data and UI elements. While Redux has dominated the state management landscape for years, developers are now seeking more straightforward and lightweight solutions like Zustand.
Why you should learn Zustand?
One of Zustand’s standout features is its minimalist API, designed to streamline state management in React components. Creating a Zustand store is as simple as calling a single function, passing a function that defines the store’s initial state and actions. Thanks to the underlying Immer library, the state can be modified directly, eliminating the need for complex reducer functions.
Is Zustand Better than Redux?
Zustand reduces boilerplate code and offers a simpler setup compared to Redux. If you prefer a simple and concise state management solution, Zustand might be a better fit.
Redux, on the other hand, has a more complex setup due to its action creators, reducers, and middleware (Is’s now much easier with Redux Toolkit). While Redux has a larger bundle size, it provides a predictable and structured way to manage the state. Also, it has a large community, so finding a solution is much easier when you encounter a problem. I believe using Redux is still beneficial for large-scale applications.
How to use Zustand?
Let’s see how to manage states using Zustand. Firstly, install the library.
npm install zustand
Create a file called store.js, and build your store hook.
const useCounterStore = create((set) => ({
}))
In this function, you should add your initial state and action functions. The set function merges state.
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 })
}));
Then you can use it in any client side component. And the best thing is you don’t even have to wrap your entire application with a state provider!
const CounterComponent = () => {
const { count, increment, decrement, reset } = useCounterStore();
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<button onClick={reset}>Reset</button>
</div>
);
}
Disadvantages of using Zustand
Zustand is relatively newer compared to other state management libraries like Redux. As a result, its ecosystem, including middleware, plugins, and integrations, might not be as extensive or mature. You may need to develop custom solutions for certain use cases that have readily available packages in other libraries.
Note: I also encounter a problem while persisting my store in Next.js. To prevent to problem I had to use the rehydrate function in a useEffect for each component I use my store hook.
Overall, Zustand has won me over with its simplicity and ease of use. Creating small to medium-sized applications with Zustand is a breeze and it is definitely worth a try.
However, for more complex and extensive projects, I’ll still be relying on Redux Saga. Redux Saga’s robust ecosystem, well-established patterns, and comprehensive middleware support make it a great fit for handling complex state management needs, side effects, and asynchronous actions.
